ziver/zallery
1
0
Fork 0
Code Pull requests Releases Activity

added divider

Browse source
This commit is contained in:
Ziver Koc 2017-08-05 23:58:11 +02:00
parent 006fd27e16
commit 78d85d99f5
2 changed files with 127 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

19
prototype/css/zallery.css
View file

@ -6,6 +6,9 @@ body{
margin-top: 40px;
margin-bottom: 40px;
}
.navbar .action a, .navbar .action span{
color: #5a5ada !important;
}
.photo-thumb, .photo {
padding: 0px;
@ -19,3 +22,19 @@ body{
float: none;
margin: 0 auto;
}
.navbar .divider-vertical {
height: 40px;
margin: 5px 14px;
border-right: 2px solid #ffffff;
border-left: 2px solid #f2f2f2;
}
.navbar-inverse .divider-vertical {
border-right-color: #222222;
border-left-color: #111111;
}
@media (max-width: 767px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
}

57
prototype/main.html
View file

@ -46,6 +46,7 @@
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Gallery</a></li>
@ -54,6 +55,14 @@
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="action">
<a href="#"><span class="glyphicon glyphicon-folder-open"></span> Create Folder</a>
</li>
<li class="action">
<a href="#"><span class="glyphicon glyphicon-open-file"></span> Upload</a>
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
@ -77,26 +86,44 @@
<div class="content">
<div class="gallery">
<div class="row col-center col-md-11">
<div class="gallery col-center col-md-11">
<div class="row">
<div class="grid folder-grid">
<div class="grid-item folder-thumb col-md-2 col-sm-3 col-xs-4"><img class="img-responsive" src="http://koc.se/Zallery/img/folder.png" /></div>
<div class="grid-item folder-thumb col-md-2 col-sm-3 col-xs-4"><img class="img-responsive" src="img/folder1.jpg" /></div>
<div class="grid-item folder-thumb col-md-2 col-sm-3 col-xs-4"><img class="img-responsive" src="img/folder2.jpg" /></div>
<div class="grid-item folder-thumb col-md-2 col-sm-3 col-xs-4"><img class="img-responsive" src="img/folder3.jpg" /></div>
<div class="grid-item folder-thumb col-md-2 col-sm-3 col-xs-4"><img class="img-responsive"
src="img/folder2.jpg"/></div>
<div class="grid-item folder-thumb col-md-2 col-sm-3 col-xs-4"><img class="img-responsive"
src="img/folder2.jpg"/></div>
<div class="grid-item folder-thumb col-md-2 col-sm-3 col-xs-4"><img class="img-responsive"
src="img/folder2.jpg"/></div>
</div>
<hr>
</div>
<div class="row col-center col-md-11">
<div class="row">
<div class="grid image-grid">
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/200" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/400" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/200" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/200" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/800" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/200" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/300" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="http://lorempixel.com/400/400" /></div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive"
src="http://lorempixel.com/400/200"/>
</div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive"
src="http://lorempixel.com/400/400"/>
</div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive"
src="http://lorempixel.com/400/200"/>
</div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive"
src="http://lorempixel.com/400/200"/>
</div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive"
src="http://lorempixel.com/400/800"/>
</div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive"
src="http://lorempixel.com/400/200"/>
</div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive"
src="http://lorempixel.com/400/300"/>
</div>
<div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12"><img class="img-responsive"
src="http://lorempixel.com/400/400"/>
</div>
</div>
</div>
</div> <!-- /gallery -->