Skip to content

Commit

Permalink
Update some examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlukic
jlukic committed Feb 9, 2015
1 parent 967a03b commit 859a36a
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 120 deletions.
43 changes: 12 additions & 31 deletions examples/feed.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,6 @@
Global
*******************************/

html,
body {
font-size: 15px;
height: 100%;
}

body {
font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
background: #FFFFFF;
margin: 0px;
padding: 0px;
color: #555555;
text-rendering: optimizeLegibility;
min-width: 320px;
}

.ui.header {
font-family: 'Source Sans Pro', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

/*******************************
Global
*******************************/

/*-------------------
Sidebar
--------------------*/
Expand All @@ -48,12 +24,11 @@ body {
Inbox
--------------------*/

#feed .page {
#feed .pusher {
background-color: #FFFFFF;
padding: 2em 0em;
}

#feed .inbox.tab .item .description {
#feed .tab .item .description {
margin-left: 2em;
}

Expand All @@ -62,19 +37,25 @@ body {
margin: 0.5em 0em 0em 1em;
}

#feed .middle.column {
#feed .left.column {
background-color: #F7F7F7;
padding: 1em 2em;
max-width: 600px;
}

#feed .middle.column h2 {
margin-top: 0em;
#feed .left.column .menu {
margin-top: 5rem;
}

#feed .right.column {
padding: 1em 2em;
background-color: #FFFFFF;
}

#feed .right.column {
font-size: 16px;
max-width: 800px;
}

/*******************************
Responsive
*******************************/
Expand Down
185 changes: 97 additions & 88 deletions examples/feed.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,111 +50,120 @@
</div>
</div>
</div>
<div class="ui divided padded grid">
<div class="seven wide middle column">
<div class="ui right floated black launch button">
<i class="list layout icon"></i> Menu
<div class="ui divided two column padded grid">
<div class="left column">
<div class="ui left floated launch icon button">
<i class="sidebar icon"></i>
</div>
<h2 class="ui header">
<i class="inbox icon"></i>
Inbox
</h2>
<div class="ui tabular filter menu">
<a class="active item" data-tab="unread">Unread</a>
<a class="item" data-tab="saved">Saved</a>
<a class="item" data-tab="all">All</a>
<div class="ui right floated launch primary button">
<i class="mail icon"></i> Compose
</div>
<div class="ui divided very relaxed selection inbox list active tab" data-tab="unread">
<a class="active item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Weekly Webcomic Wrapup fought the law, and the law won</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Scientists discover new breed of dog</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 10, 2013</div>
<div class="description">Dogs colony in Antarctica</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 09, 2013</div>
<div class="description">Famous dog whisperer Chakotay dies today at 104</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 07, 2013</div>
<div class="description">Top 10 Things to Know about Labradoodles</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 05, 2013</div>
<div class="description">Study shows children enjoy the company of animals</div>
</a>
<div class="ui secondary pointing filter menu">
<a class="active red item" data-tab="unread">Unread</a>
<a class="blue item" data-tab="saved">Saved</a>
<a class="green item" data-tab="all">All</a>
</div>
<div class="ui divided very relaxed inbox selection list tab" data-tab="saved">
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Your favorite saved article</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Your favorite saved article</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Your favorite saved article</div>
</a>

<div class="ui active tab" data-tab="unread">
<div class="ui very relaxed divided link list">
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Scientists discover new breed of dog</div>
</a>
<a class="active item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Weekly Webcomic Wrapup fought the law, and the law won</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 10, 2013</div>
<div class="description">Dogs colony in Antarctica</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 09, 2013</div>
<div class="description">Famous dog whisperer Chakotay dies today at 104</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 07, 2013</div>
<div class="description">Top 10 Things to Know about Labradoodles</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 05, 2013</div>
<div class="description">Study shows children enjoy the company of animals</div>
</a>
</div>
</div>
<div class="ui divided very relaxed inbox selection list tab" data-tab="all">
<a class="item">
<div class="left floated ui star rating">
<i class="link icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">There turns out there is only one article under all.</div>
</a>

<div class="ui tab" data-tab="saved">
<div class="ui very relaxed divided link list">
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Your favorite saved article</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Your favorite saved article</div>
</a>
<a class="item">
<div class="left floated ui star rating">
<i class="icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">Your favorite saved article</div>
</a>
</div>
</div>

<div class="ui tab" data-tab="all">
<div class="ui very relaxed divided link list">
<a class="item">
<div class="left floated ui star rating">
<i class="link icon"></i>
</div>
<div class="right floated date">Sep 14, 2013</div>
<div class="description">There turns out there is only one article under all.</div>
</a>
</div>
</div>

<div class="ui divider"></div>

<div class="current">Showing <b>6</b> of 213</div>

<div class="ui text menu">
<a class="icon item"><i class="icon left arrow"></i></a>
<a class="icon item"><i class="icon left chevron"></i></a>
<a class="active item">1</a>
<div class="disabled item">...</div>
<a class="item">10</a>
<a class="item">11</a>
<a class="item">12</a>
<a class="icon item"><i class="icon right arrow"></i></a>
<a class="icon item"><i class="icon right chevron"></i></a>
</div>
</div>
<div class="nine wide right column">
<div class="right column">
<h1 class="ui header">Weekly Webcomic Wrapup fought the law, and the law won</h1>

<a class="ui label">Unread</a>
Expand Down
3 changes: 2 additions & 1 deletion examples/grid.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@



/* Animation */
/* Uncomment to animate examples
#grid .examples {
margin: 0 auto;
-webkit-animation: grid 7s ease infinite;
Expand Down Expand Up @@ -100,3 +100,4 @@
width: 100%;
}
}
*/

0 comments on commit 859a36a

Please sign in to comment.