Skip to content

Instantly share code, notes, and snippets.

@ManasN

ManasN/Semantic UI.markdown

Created September 20, 2015 14:30
Show Gist options
  • Save ManasN/ee49914ab7f20d27b57a to your computer and use it in GitHub Desktop.
Save ManasN/ee49914ab7f20d27b57a to your computer and use it in GitHub Desktop.
Download ZIP
Semantic UI
Raw
index.html
<div class="ui bottom attached segment">
<div class="sidebar-container">
<div class="ui visible fixed inverted left vertical sidebar menu">
<div class="item">
<div class="header">
Justin Jones - Agenda
</div>
</div>
<div class="item">
<div class="header">Saturday January 23</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Dog Sledding</span><br>8:00 am - 10:30 am
</a>
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Snowshoe</span><br>12:00 pm - 3:30 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Mistress America</span><br>6:00 pm - 8:00 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Wahso</span><br>8:15 pm - 11:00 pm
</a>
</div>
<div class="agendaheader header">Sunday January 24</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Full day ski instructor</span><br>9:00 am - 4:00 pm
</a>
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Lift Ticket</span><br>9:00 am - 4:00 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Last Days in the Desert</span><br>6:00 pm - 8:05 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Chimayo</span><br>8:15 pm - 11:00 pm
</a>
</div>
<div class="agendaheader header">Monday January 25</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Massage</span><br>9:00 am - 9:50 am
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Stein</span><br>7:00 pm - 11:30 pm
</a>
</div>
<div class="agendaheader header">Tuesday January 26</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Cross Country Skiing</span><br>9:00 am - 12:00 pm
</a>
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Call Me Lucky</span><br>2:00 pm - 4:00 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >I'll See You In My Dreams</span><br>5:30 pm - 8:05 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Grappa</span><br>8:15 pm - 11:00 pm
</a>
</div>
</div>
<div class="item">
<div class="header">
Hollie Jones - Agenda
</div>
</div>
<div class="item">
<div class="header">Sunday January 24</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Full day ski instructor</span><br>9:00 am - 4:00 pm
</a>
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Lift Ticket</span><br>9:00 am - 4:00 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Last Days in the Desert</span><br>6:00 pm - 8:05 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Chimayo</span><br>8:15 pm - 11:00 pm
</a>
</div>
<div class="agendaheader header">Monday January 25</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Massage</span><br>9:00 am - 9:50 am
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Stein</span><br>7:00 pm - 11:30 pm
</a>
</div>
<div class="agendaheader header">Tuesday January 26</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Cross Country Skiing</span><br>9:00 am - 12:00 pm
</a>
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Call Me Lucky</span><br>2:00 pm - 4:00 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >I'll See You In My Dreams</span><br>5:30 pm - 8:05 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Grappa</span><br>8:15 pm - 11:00 pm
</a>
</div>
</div>
</div>
</div>
<div class="pusher">
<div class="ui container">
<div class="ui basic segment">
<h1 class="ui header">Available Activities</h1>
<div class="ui icon top left pointing dropdown button blue">
<i class="filter icon"></i>
<span class="text">All Dates</span>
<div class="menu">
<div class="header">Available Days</div>
<div class="item">Jan 23 - Saturday</div>
<div class="item">Jan 24 - Sunday</div>
<div class="item">Jan 25 - Monday</div>
<div class="item">Jan 26 - Tuesday</div>
</div>
</div>
<div class="ui icon top left pointing dropdown button blue">
<i class="sort content descending icon"></i>
<span class="text">Sort Activities</span>
<div class="menu">
<div class="header">Sort By</div>
<div class="item">Date</div>
<div class="item">Categories</div>
</div>
</div>
<select id="activity-filter" name="activity-filter" multiple="" class="ui dropdown">
<i class="filter icon"></i>
<option value="">Showing All Activities</option>
<option value="dogsled">Dogsled</option>
<option value="crosscountrskiing">Cross Country Skiing</option>
<option value="film">Film</option>
<option value="skiing">Skiing</option>
<option value="snowshoeing">Snow Shoeing</option>
<option value="snowboarding">Snow Boarding</option>
<option value="snowbobiling">Snow Mobiling</option>
<option value="spa">Spa</option>
</select>
<button class="ui button show-all">
Clear
</button>
<div class="ui divided items">
<h3 class="ui header">Saturday January 23</h3>
<div class="item">
<div class="image">
<img src="http://icons.indats.com/sewlong/skiing.jpg">
</div>
<div class="content">
<a class="header">Skiing</a>
<div class="meta">
<b>Saturday January 23</b> 9:00 am - 10:30 am
</div>
<div class="description">
<p>Lorem ipsum dolor sit amet, pri ei sale sonet ornatus. Usu dicunt omnium cu. In vix dicam fuisset adipiscing, cibo delenit ius id, eu regione fuisset vix. Ne modo eruditi vim. Mea nostro mentitum conceptam in. Ei cum quaestio eleifend oportere.</p>
</div>
<div class="extra">
<div class="ui right floated positive button add-button">
Added
<i class="right checkmark icon"></i>
</div>
<div class="ui label">Intermediate Skill</div>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://icons.indats.com/sewlong/massage.jpg">
</div>
<div class="content">
<a class="header">Massage</a>
<div class="meta">
<b>Saturday January 23</b> 9:30 am - 10:20 am
</div>
<div class="description">
<p>Lorem ipsum dolor sit amet, pri ei sale sonet ornatus. Usu dicunt omnium cu. In vix dicam fuisset adipiscing, cibo delenit ius id, eu regione fuisset vix. Ne modo eruditi vim. Mea nostro mentitum conceptam in. Ei cum quaestio eleifend oportere.</p>
</div>
<div class="extra">
<div class="ui right floated primary button add-button">
Add Activity
<i class="right chevron icon"></i>
</div>
<div class="ui label">Relaxing</div>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://icons.indats.com/sewlong/illseeyouinmydreams2.jpg">
</div>
<div class="content">
<a class="header">I'll See You In My Dreams</a>
<div class="meta">
<b>Saturday January 23</b> 2:30 pm - 4:30 pm
</div>
<div class="description">
<p>Lorem ipsum dolor sit amet, pri ei sale sonet ornatus. Usu dicunt omnium cu. In vix dicam fuisset adipiscing, cibo delenit ius id, eu regione fuisset vix. Ne modo eruditi vim. Mea nostro mentitum conceptam in. Ei cum quaestio eleifend oportere.</p>
</div>
<div class="extra">
<div class="ui right floated primary button add-button">
Add Activity
<i class="right chevron icon"></i>
</div>
<div class="ui label">2 Hours</div>
<div class="ui label">Drama</div>
<div class="ui label">Rated R</div>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://icons.indats.com/sewlong/dogsled.jpg">
</div>
<div class="content">
<a class="header">Dog Sledding</a>
<div class="meta">
<b>Saturday January 23</b> 3:30 pm - 5:00 pm
</div>
<div class="description">
<p>Lorem ipsum dolor sit amet, pri ei sale sonet ornatus. Usu dicunt omnium cu. In vix dicam fuisset adipiscing, cibo delenit ius id, eu regione fuisset vix. Ne modo eruditi vim. Mea nostro mentitum conceptam in. Ei cum quaestio eleifend oportere.</p>
</div>
<div class="extra">
<div class="ui right floated primary button add-button">
Add Activity
<i class="right chevron icon"></i>
</div>
<div class="ui label">21 and Over</div>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://icons.indats.com/sewlong/crosscountry.jpg">
</div>
<div class="content">
<a class="header">Cross Country Skiing</a>
<div class="meta">
<b>Saturday January 23</b> 12:00 pm - 1:00 pm
</div>
<div class="description">
<p>Lorem ipsum dolor sit amet, pri ei sale sonet ornatus. Usu dicunt omnium cu. In vix dicam fuisset adipiscing, cibo delenit ius id, eu regione fuisset vix. Ne modo eruditi vim. Mea nostro mentitum conceptam in. Ei cum quaestio eleifend oportere.</p>
</div>
<div class="extra">
<div class="ui right floated primary button add-button">
Add Activity
<i class="right chevron icon"></i>
</div>
<div class="ui label">Limited</div>
</div>
</div>
</div>
<h3 class="ui header">Sunday January 24</h3>
<div class="item">
<div class="image">
<img src="http://icons.indats.com/sewlong/skiing.jpg">
</div>
<div class="content">
<a class="header">Skiing</a>
<div class="meta">
<b>Sunday January 24</b> 9:00 am - 10:30 am
</div>
<div class="description">
<p>Lorem ipsum dolor sit amet, pri ei sale sonet ornatus. Usu dicunt omnium cu. In vix dicam fuisset adipiscing, cibo delenit ius id, eu regione fuisset vix. Ne modo eruditi vim. Mea nostro mentitum conceptam in. Ei cum quaestio eleifend oportere.</p>
</div>
<div class="extra">
<div class="ui right floated primary button add-button">
Add Activity
<i class="right chevron icon"></i>
</div>
<div class="ui label">Limited</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui modal activity-modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="image content">
<div class="ui medium image">
<img src="http://icons.indats.com/sewlong/skiing-modal.jpg">
</div>
<div class="description">
<div class="ui header">Skiing</div>
<p><b>Sunday January 23</b> 9:00 am to 10:00 am</p>
<p>Lorem ipsum dolor sit amet, pri ei sale sonet ornatus. Usu dicunt omnium cu. In vix dicam fuisset adipiscing, cibo delenit ius id, eu regione fuisset vix. Ne modo eruditi vim. Mea nostro mentitum conceptam in. Ei cum quaestio eleifend oportere.</p>
<h3>Select People</h3>
<div class="ui relaxed list">
<div class="item">
<div class="ui master checkbox">
<input type="checkbox" name="fruits">
<label>All</label>
</div>
<div class="list">
<div class="item">
<div class="ui child checkbox">
<input type="checkbox" name="apple">
<label>Justin Jones</label>
</div>
</div>
<div class="item">
<div class="ui child checkbox">
<input type="checkbox" name="orange">
<label>Hollie Jones</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Cancel
</div>
<div class="ui positive right labeled icon button">
Save
<i class="checkmark icon"></i>
</div>
</div>
</div>
<div class="ui fixed inverted vertical footer segment">
<button class="ui huge save-button green button">
Finish
</button>
</div>
<div class="ui basic save-modal modal">
<div class="ui active">
<div class="ui large text loader">Just one sec, we're updating your agenda!</div>
</div>
</div>
</div>
Raw
script.js
$('.user')
.popup({
inline : true,
hoverable: true,
position : 'top right',
delay: {
show: 100,
hide: 100
}
})
;
$('.ui.dropdown')
.dropdown()
;
$('.add-button,.agenda-item').click(function(){
$('.activity-modal').modal('show');
});
$('.list .master.checkbox')
.checkbox({
// check all children
onChecked: function() {
var
$childCheckbox = $(this).closest('.checkbox').siblings('.list').find('.checkbox')
;
$childCheckbox.checkbox('check');
},
// uncheck all children
onUnchecked: function() {
var
$childCheckbox = $(this).closest('.checkbox').siblings('.list').find('.checkbox')
;
$childCheckbox.checkbox('uncheck');
}
})
;
$('.show-all').click(function(){
$("#activity-filter").dropdown('clear');
});
$(".save-button").click(function(){
$('.save-modal').modal('show');
var URL='http://codepen.io/voltron2112/debug/JdQMWa';
setTimeout(function(){ window.location = URL; }, 1500 );
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.8/semantic.min.js"></script>
Raw
style.css
.agendaheader{
padding-top:15px;
}
.agenda-item {
margin-left: 10px;
line-height: 1.4em !important;
}
.sidebar-container {
width: 260px;
overflow: hidden;
height: 100%;
position: fixed;
margin: 0;
top: 0;
left: 0;
}
.pusher {
padding-left: 260px;
}
.footer {
position: fixed !important;
background: #E6E6E6 !important;
bottom: 0px;
height: 75px;
width: 100%;
left: 260px;
}
.save-button{
position: fixed;
right: 10px;
bottom: 12px;
}
.pusher {
margin-bottom: 80px;
}
.side-agenda-item {
color: white !important;
}
.sidebar::-webkit-scrollbar { width: 0 !important }
.sidebar { -ms-overflow-style: none; }
.sidebar { overflow: -moz-scrollbars-none; }
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.8/semantic.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment