Skip to content
This repository was archived by the owner on Apr 29, 2019. It is now read-only.

ui tweaks #79

Merged
zippy merged 6 commits into from
May 23, 2018
Merged

ui tweaks #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f9ab8b7
ui updates
bboyatwork May 14, 2018
b1504b4
Updating clutter UI style
bboyatwork May 17, 2018
6da5bdd
fix-merge-conflict
bboyatwork May 22, 2018
1a55e1a
Integrating UI updates
bboyatwork May 22, 2018
093b027
Removed unnecessary clutter subdirectory
bboyatwork May 23, 2018
7d3ec44
Fixed gap
bboyatwork May 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 74 additions & 6 deletions ui-src/public/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ body {
line-height: 1.3em;
height: 100%;
background-color: #BBB;
background-image: url("cats.jpg");
background-size: 100% auto;
background-image: url("cats.jpg") ;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
width: calc(100vw - 34px); /* Prevent jump from scrollbar appearing on only some pages */
padding-left: 9px; /* Recenter page from scrollbar width adjustment */
}
Expand All @@ -16,6 +18,23 @@ ul {
.row {
margin-top: 1em;
}

.row .first {
width: 100%;
}

/* Profile Style*/
.logo img {
padding: 10px 0px;
max-width: 150px;
}


#banner a {
color: #fff;
text-decoration: none;
}

#container {
margin: 0;
width: 100%;
Expand Down Expand Up @@ -115,6 +134,7 @@ ul li {
background-color: rgba(0, 0, 0, 0.6);
}

/* Logo style */
.logo {
margin-bottom: 1em;
text-align: center;
Expand All @@ -124,6 +144,11 @@ ul li {
width: 100%;
}

.col-sm-2.contentcontainer {
margin: 0 auto;
max-width: 50%;
}

#about {
color: white;
}
Expand All @@ -133,6 +158,8 @@ a#handle {
//background-color: rgba(0, 0, 0, 0.6);
text-align:center;
color:white;
font-size: 1.3em;
font-weight: 400;
}

.subtitle {
Expand Down Expand Up @@ -185,21 +212,62 @@ a#handle {
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.6);
margin-bottom: 1em;
padding-left: 10px;
padding-right: 10px;
padding-left: 10px;
padding-right: 10px;
}

#content {
.container {
padding-right: 15px;
padding-left: 15px;
width: 100% !important;
margin-right: 0!important;
margin-left: 0!important;
}

@media (min-width: 768px) {
.fixed-area{
position: fixed;
top: 0px;
z-index: 99999;
background: #000;
width: 100%;
}

}

/* Meow Feed Style */

#content, #feedContent {
font-size: 1.15em;
line-height: 1.4;
overflow: hidden;
}

#content p {
#content p, #feedContent p {
text-indent: 2.4em;
margin-bottom: 1.25em;
}

#feedContent {
clear:both;
max-width: 55%;
margin: 250px auto 0 auto;
}

@media (max-width: 1200px) and (min-width: 768px){
#feedContent{
margin: 300px auto 0 auto!important;
max-width: 75%!important;
}
}

@media (max-width: 768px){
#feedContent{
margin: 50px auto 0 auto!important;
max-width: 77%!important;
}
}

blockquote {
font-style: italic;
margin: 0em 25px 1em 25px;
Expand Down
107 changes: 52 additions & 55 deletions ui-src/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,67 +38,64 @@ class App extends Component {
</Modal>
</div>
) : (
<div className="container">
<div className="spinner transition500" />
<div className="error transition500" />
<div className="row">
<div className="col-sm-2">
<div className="logo">
<img src="/cat-eating-bird-circle.png" alt="cat eating bird" />
</div>
</div>
<div className="col-sm-7">
<div className="contentcontainer">
<div>
<Link to="/" id="handle">
{handle}
</Link>
<Link
to="/editProfile"
id="changeHandleButton"
className="btn btn-default"
>
Edit Profile
</Link>
<div className='container'>
<div className='spinner transition500' />
<div className='error transition500' />
<div className='row first'>
<div className='fixed-area'>
<div className='col-sm-2 contentcontainer'>
<div className='logo'>
<img src='/cat-eating-bird-circle.png' alt='cat eating bird' />
<Link to='/' id='handle'>{handle}</Link>
</div>
<Link to="/follow" id="followButton" className="btn btn-default">
Follow People
</Link>
<div id="banner">
Clutter
<div className="subtitle">can haz herd cats?</div>
</div>
<div className="col-sm-7">
<div className='contentcontainer'>
<div>
<Link to='/editProfile' id='changeHandleButton' className='btn btn-default'>Profile</Link>
</div>
<Link to='/follow' id='followButton' className='btn btn-default'>Follow People</Link>
<div id='banner'>
<a href="/">Clutter</a>
<div className='subtitle'>can haz herd cats?</div>
</div>
<div id='content'>
<Route path='/' exact component={NewMeowContainer} />
<Route path='/editProfile' component={EditProfileContainer} />
<Route path='/follow' component={FollowContainer} />
<Route path='/meow/:meowHash' component={MeowContainer} />
</div>
</div>
</div>

<div id="content">
<Route path="/" exact component={NewMeowContainer} />
<Route path="/" exact component={FollowingFeedContainer} />
<Route path="/u/:handle" component={UserFeedContainer} />
<Route path="/editProfile" component={EditProfileContainer} />
<Route path="/follow" component={FollowContainer} />
<Route path="/meow/:meowHash" component={MeowContainer} />
<div className='col-sm-3'>
<div className='alphabox'>
<div id='about'>
<h2>What is Clutter?</h2>
<p>
<a href="https://en.wiktionary.org/wiki/clutter">
<em>clutter</em>
</a>{' '}
is a flock of cats.
</p>
<p>
<strong>Clutter</strong> is a fully decentralized alternative
to Twitter.
</p>
<p>Impossible to censor or control.</p>
<p>
Join the mewvolution on{' '}
<a href="http://holochain.org">holochain.org</a>.
</p>
</div>
</div>
</div>
</div>
<div className="col-sm-3">
<div className="alphabox">
<div id="about">
<h2>What is Clutter?</h2>
<p>
A{' '}
<a href="https://en.wiktionary.org/wiki/clutter">
<em>clutter</em>
</a>{' '}
is a flock of cats.
</p>
<p>
<strong>Clutter</strong> is a fully decentralized alternative
to Twitter.
</p>
<p>Impossible to censor or control.</p>
<p>
Join the mewvolution on{' '}
<a href="http://holochain.org">holochain.org</a>.
</p>
<div className='row'>
<div className='contentcontainer' id='feedContent'>
<div>
<Route path='/' exact component={FollowingFeedContainer} />
<Route path='/u/:handle' component={UserFeedContainer} />
</div>
</div>
</div>
Expand Down