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

Adds feed example starter

pull/19/head
jlukic 11 years ago
parent
2a1c343d11
commit
577dbe5d76
10 changed files with 329 additions and 11 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      build/less/collections/menu.less
  2. 4
      build/uncompressed/collections/menu.css
  3. 6
      node/src/documents/module.html
  4. 70
      node/src/files/examples/boilerplate.html
  5. 65
      node/src/files/examples/feed.css
  6. 170
      node/src/files/examples/feed.html
  7. 9
      node/src/files/examples/feed.js
  8. 4
      node/src/files/release/less/collections/menu.less
  9. 4
      node/src/files/release/uncompressed/collections/menu.css
  10. 4
      src/collections/menu.less

4
build/less/collections/menu.less
View File

@ -528,7 +528,7 @@
}
.ui.vertical.menu .item:first-child:before {
background-image: none;
background-image: none !important;
}
/*--- Dropdown ---*/
@ -1501,7 +1501,7 @@
.ui.menu.fluid,
.ui.vertical.menu.fluid {
display: block;
width: 100%;
width: 100% !important;
}

4
build/uncompressed/collections/menu.css
View File

@ -396,7 +396,7 @@
background-image: linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
}
.ui.vertical.menu .item:first-child:before {
background-image: none;
background-image: none !important;
}
/*--- Dropdown ---*/
.ui.vertical.menu .dropdown.item > i {
@ -1182,7 +1182,7 @@
.ui.menu.fluid,
.ui.vertical.menu.fluid {
display: block;
width: 100%;
width: 100% !important;
}
/*-------------------
Evenly Sized

6
node/src/documents/module.html
View File

@ -35,7 +35,7 @@ type : 'Semantic'
<th>Usage</th>
</thead>
<tr>
<td>moduleName</td>
<td>name</td>
<td>Name used in debug logs to differentiate this widget from other debug statements.</td>
</tr>
<tr>
@ -54,6 +54,10 @@ type : 'Semantic'
<td>namespace</td>
<td>Namespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.</td>
</tr>
<tr>
<td>metadata</td>
<td>An object containing any metadata attributes used.</td>
</tr>
<tr>
<td>selectors</td>
<td>An object containing all selectors used in the module, these are usually children of the module.</td>

70
node/src/files/examples/boilerplate.html
View File

@ -0,0 +1,70 @@
<!DOCTYPE html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Feed Example - Semantic</title>
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/elements/button.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/elements/divider.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/elements/header.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/elements/icon.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/elements/image.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/elements/input.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/elements/label.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/elements/loader.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/elements/progress.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/elements/segment.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/collections/breadcrumb.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/collections/form.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/collections/grid.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/collections/menu.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/collections/message.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/collections/table.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/views/list.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/modules/modal.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/modules/dropdown.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/modules/popup.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/modules/sidebar.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/modules/tab.css">
<link rel="stylesheet" type="text/css" class="ui" href="/../uncompressed/modules/checkbox.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
-->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<script src="/../javascript/library/jquery.js"></script>
<script src="/../javascript/library/history.js"></script>
<script src="/../uncompressed/modules/behavior/state.js"></script>
<script src="/../uncompressed/modules/checkbox.js"></script>
<script src="/../uncompressed/modules/dimmer.js"></script>
<script src="/../uncompressed/modules/dropdown.js"></script>
<script src="/../uncompressed/modules/modal.js"></script>
<script src="/../uncompressed/modules/popup.js"></script>
<script src="/../uncompressed/modules/rating.js"></script>
<script src="/../uncompressed/modules/sidebar.js"></script>
<script src="/../uncompressed/modules/tab.js"></script>
<script src="/../uncompressed/modules/transition.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44039803-1', 'semantic-ui.com');
ga('send', 'pageview');
</script>
</head>
<body id="feed">
</body>
</html>

65
node/src/files/examples/feed.css
View File

@ -0,0 +1,65 @@
html,
body {
font-size: 15px;
height: 100%;
overflow-x: hidden;
}
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;
}
#feed .grid {
height: 100%;
}
#feed > .grid > .column {
height: 100%;
}
#feed .left.column {
background-color: #333333;
}
#feed .left.column > .menu {
float: left;
height: 100%;
}
#feed .inbox {
background-color: #FFFFFF;
}
#feed .inbox .item {
padding-top: 1rem;
padding-bottom: 1rem;
}
#feed .right.column {
padding: 1em 2em;
background-color: #FFFFFF;
}
@media only screen and (max-width : 800px) {
#feed .left.column {
min-width: 200px;
}
#feed .inbox .date {
float: none;
margin-top: 0.5em;
}
}
@media only screen and (max-width : 1200px) {
#feed .left.column > .menu .item {
font-size: 1rem;
}
}

170
node/src/files/examples/feed.html
View File

@ -0,0 +1,170 @@
<!DOCTYPE html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<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="../release/uncompressed/elements/button.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/elements/divider.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/elements/header.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/elements/icon.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/elements/image.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/elements/input.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/elements/label.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/elements/loader.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/elements/progress.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/elements/segment.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/collections/breadcrumb.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/collections/form.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/collections/grid.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/collections/menu.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/collections/message.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/collections/table.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/views/list.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/modules/modal.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/modules/dropdown.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/modules/popup.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/modules/sidebar.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/modules/tab.css">
<link rel="stylesheet" type="text/css" href="../release/uncompressed/modules/checkbox.css">
<script src="../javascript/library/jquery.js"></script>
<script src="../javascript/library/history.js"></script>
<script src="../release/uncompressed/modules/behavior/state.js"></script>
<script src="../release/uncompressed/modules/checkbox.js"></script>
<script src="../release/uncompressed/modules/dimmer.js"></script>
<script src="../release/uncompressed/modules/dropdown.js"></script>
<script src="../release/uncompressed/modules/modal.js"></script>
<script src="../release/uncompressed/modules/popup.js"></script>
<script src="../release/uncompressed/modules/rating.js"></script>
<script src="../release/uncompressed/modules/sidebar.js"></script>
<script src="../release/uncompressed/modules/tab.js"></script>
<script src="../release/uncompressed/modules/transition.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44039803-1', 'semantic-ui.com');
ga('send', 'pageview');
</script>
<link rel="stylesheet" type="text/css" href="feed.css">
<script src="feed.js"></script>
</head>
<body id="feed">
<div class="ui celled grid">
<div class="three wide left column">
<div class="ui large fluid inverted vertical menu">
<a class="item">
<i class="add icon"></i> New Feed
</a>
<a class="item">
<i class="bookmark icon"></i> Favorite Feeds
</a>
<a class="active item">
Dogs Weekly <span class="ui label">213</span>
</a>
<a class="item">
Joystiq <span class="ui label">113</span>
</a>
<div class="item">
<b>Archived Feeds</b>
<div class="menu">
<a class="item">
Engadget <span class="ui label">11</span>
</a>
<a class="item">
NY Times Tech Blog <span class="ui label">21</span>
</a>
</div>
</div>
</div>
</div>
<div class="six wide middle column">
<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>
<div class="ui divided inbox selection list active tab" data-tab="unread">
<a class="item">
<i class="empty star icon"></i>
Scientists discover new breed of dog
<div class="right floated date">Sep 14, 2013</div>
</a>
<a class="item">
<i class="empty star icon"></i>
Scientists discover new breed of dog
<div class="right floated date">Sep 14, 2013</div>
</a>
<a class="item">
<i class="star icon"></i>
Scientists discover new breed of dog
<div class="right floated date">Sep 14, 2013</div>
</a>
<a class="item">
<i class="empty star icon"></i>
Scientists discover new breed of dog
<div class="right floated date">Sep 14, 2013</div>
</a>
<a class="item">
<i class="empty star icon"></i>
Scientists discover new breed of dog
<div class="right floated date">Sep 14, 2013</div>
</a>
<a class="item">
<i class="empty star icon"></i>
Scientists discover new breed of dog
<div class="right floated date">Sep 14, 2013</div>
</a>
</div>
<div class="ui divided inbox selection list tab" data-tab="saved">
<a class="item">
<i class="star icon"></i>
Your favorite saved article
<div class="right floated date">Sep 14, 2013</div>
</a>
<a class="item">
<i class="star icon"></i>
Your favorite saved article
<div class="right floated date">Sep 14, 2013</div>
</a>
<a class="item">
<i class="star icon"></i>
Your favorite saved article
<div class="right floated date">Sep 14, 2013</div>
</a>
</div>
<div class="ui divided inbox selection list tab" data-tab="all">
<a class="item">
<i class="star icon"></i>
There turns out there is only one article under all.
<div class="right floated date">Sep 14, 2013</div>
</a>
</div>
</div>
<div class="seven wide right column">
<h1 class="ui header">Weekly Webcomic Wrapup fought the law, and the law won</h1>
<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>
</div>
</div>
</body>
</html>

9
node/src/files/examples/feed.js
View File

@ -0,0 +1,9 @@
$(document)
.ready(function() {
$('.filter.menu .item')
.tab()
;
})
;

4
node/src/files/release/less/collections/menu.less
View File

@ -528,7 +528,7 @@
}
.ui.vertical.menu .item:first-child:before {
background-image: none;
background-image: none !important;
}
/*--- Dropdown ---*/
@ -1501,7 +1501,7 @@
.ui.menu.fluid,
.ui.vertical.menu.fluid {
display: block;
width: 100%;
width: 100% !important;
}

4
node/src/files/release/uncompressed/collections/menu.css
View File

@ -396,7 +396,7 @@
background-image: linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
}
.ui.vertical.menu .item:first-child:before {
background-image: none;
background-image: none !important;
}
/*--- Dropdown ---*/
.ui.vertical.menu .dropdown.item > i {
@ -1182,7 +1182,7 @@
.ui.menu.fluid,
.ui.vertical.menu.fluid {
display: block;
width: 100%;
width: 100% !important;
}
/*-------------------
Evenly Sized

4
src/collections/menu.less
View File

@ -528,7 +528,7 @@
}
.ui.vertical.menu .item:first-child:before {
background-image: none;
background-image: none !important;
}
/*--- Dropdown ---*/
@ -1501,7 +1501,7 @@
.ui.menu.fluid,
.ui.vertical.menu.fluid {
display: block;
width: 100%;
width: 100% !important;
}

Write Preview
Loading…
Cancel
Save