richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix feed example

pull/1129/head
jlukic 10 years ago
parent
301744b32a
commit
9fc83fe758
4 changed files with 61 additions and 52 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      build/examples/feed.css
  2. 54
      build/examples/feed.html
  3. 36
      build/examples/homepage.css
  4. 10
      build/examples/homepage.html

13
build/examples/feed.css
View File

@ -50,14 +50,11 @@ body {
Inbox
--------------------*/
#feed .inbox.tab {
#feed .page {
background-color: #FFFFFF;
padding: 2em 0em;
}
#feed .inbox.tab .item {
padding-top: 1rem;
padding-bottom: 1rem;
}
#feed .inbox.tab .item .rating {
margin-top: 0.2rem;
@ -67,9 +64,9 @@ body {
margin-left: 2em;
}
#feed .page {
#feed .current {
float: right;
margin-top: 0.9em;
margin: 0.5em 0em 0em 1em;
}
#feed .middle.column {
@ -82,7 +79,7 @@ body {
#feed .right.column {
padding: 1em 2em;
background-color: #FAFAFA;
background-color: #FFFFFF;
}
/*******************************

54
build/examples/feed.html
View File

@ -10,11 +10,11 @@
<title>Feed Example - Semantic</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../packaged/css/semantic.css">
<link rel="stylesheet" type="text/css" href="../packaged/definitions/css/semantic.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.address/1.6/jquery.address.js"></script>
<script src="../packaged/javascript/semantic.js"></script>
<script src="../packaged/definitions/javascript/semantic.js"></script>
<link rel="stylesheet" type="text/css" href="feed.css">
<script src="feed.js"></script>
@ -50,7 +50,7 @@
</div>
</div>
</div>
<div class="ui celled grid">
<div class="ui divided grid">
<div class="seven wide middle column">
<div class="ui right floated black launch button">
<i class="list layout icon"></i> Menu
@ -66,56 +66,76 @@
</div>
<div class="ui divided inbox selection list active tab" data-tab="unread">
<a class="active item">
<div class="left floated ui star rating"><i class="icon"></i></div>
<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="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="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="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="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="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 class="ui divided inbox selection list tab" data-tab="saved">
<a class="item">
<div class="left floated ui star rating"><i class="icon"></i></div>
<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="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="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 class="ui divided 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="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>
@ -123,7 +143,7 @@
<div class="ui divider"></div>
<div class="page">Showing <b>6</b> of 213</div>
<div class="current">Showing <b>6</b> of 213</div>
<div class="ui pagination menu">
<a class="icon item"><i class="icon left arrow"></i></a>
<a class="active item">1</a>
@ -136,7 +156,11 @@
</div>
<div class="nine wide right column">
<h1 class="ui header">Weekly Webcomic Wrapup fought the law, and the law won</h1>
Tags: <a class="ui teal label">Unread</a> <a class="ui teal label">Comics</a>
<a class="ui label">Unread</a>
<a class="ui label">Comics</a>
<div class="ui divider"></div>
<p>So there's this video game coming out Tuesday called Grand Theft Auto 5. Don't know if you've heard of it. Anyways, it's all about crime and gangs and some roughneck ne'er-do-wells, so I thought this would be the perfect time to talk about times when we've been... well, less than perfect.</p>
<p>When I was a young'un, I was a frequent visitor to the local swimming pool. I was also a frequent lover of AirHeads candy, which the pool happened to sell. Waiting, watching, stalking the counter like a big cat in the savannah, I waited for the perfect opportunity to strike. While the lifeguards were busy, I snuck through the gate, reached up and took both cherry and "mystery white" AirHeads. I quickly ran out to the sidewalk and reveled in my sweet, delicious victory... for all of ten seconds, before I felt guilty enough to sneak back in and return the .20 worth of candy I had stolen.</p>
<p>While you confess your crimes - hopefully minor, and nothing you can be persecuted for - take a moment to enjoy this week's webcomics, and vote for your favorite after the jump.</p>

36
build/examples/homepage.css
View File

@ -78,57 +78,47 @@ html {
/* Mobile Only */
@media only screen and (max-width : 768px) {
.ui.page.grid.segment {
padding-top: 2rem;
padding-bottom: 2rem;
}
.menu .right.menu > .item {
#home .menu .right.menu > .item {
display: none;
}
.menu .right.menu > .mobile.item {
#home .menu .right.menu > .mobile.item {
display: block;
}
h1.ui.header {
#home h1 {
font-size: 1.5em;
}
.masthead.segment {
background-size: auto;
}
.masthead.segment .information {
margin-left: 190px;
#home .masthead.segment .information {
margin-left: 170px;
}
.masthead.segment .image {
bottom: -65px;
width: 150px;
#home .masthead.segment .image {
width: 170px;
}
.masthead.segment .button {
#home .masthead.segment .button {
font-size: 1rem;
}
.overview .divided.grid .header .icon {
#home .overview .divided.grid .header .icon {
font-size: 1.5em;
}
.overview .divided.grid .header + p {
#home .overview .divided.grid .header + p {
min-height: 0px;
}
.masthead.segment .column {
#home .masthead.segment .column {
font-size: 0.7rem;
}
.masthead.segment .column p {
#home .masthead.segment .column p {
display: none;
}
.selection.list .right.floated {
#home .selection.list .right.floated {
display: none;
}
}

10
build/examples/homepage.html
View File

@ -9,8 +9,6 @@
<!-- Site Properities -->
<title>Homepage Example - Semantic</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../packaged/definitions/css/semantic.css">
<link rel="stylesheet" type="text/css" href="homepage.css">
@ -68,7 +66,7 @@
<div class="ui three column center aligned stackable divided grid">
<div class="column">
<div class="ui icon header">
<i class="circular book link icon"></i>
<i class="student icon"></i>
Courses
</div>
<p>Take your kitty to a cat-ducation course and learn how to treat her well.</p>
@ -80,7 +78,7 @@
</div>
<div class="column">
<div class="ui icon header">
<i class="circular code link icon"></i>
<i class="code icon"></i>
Library
</div>
<p>Dig through our cat library to found out amazing things you can do with your kitty.</p>
@ -93,7 +91,7 @@
</div>
<div class="column">
<div class="ui icon header">
<i class="circular user link icon"></i>
<i class="user icon"></i>
Community
</div>
<p>Get feedback on your cat from a community of loving pet owners on our online bulletin board system.</p>
@ -113,7 +111,7 @@
<div class="row">
<div class="column">
<h1 class="center aligned ui inverted header">
Cat Tips Right In Your Inbox
The Best Cat Articles
</h1>
</div>
</div>

Write Preview
Loading…
Cancel
Save