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-top: 40px;
margin-bottom: 40px; margin-bottom: 40px;
} }
.navbar .action a, .navbar .action span{
color: #5a5ada !important;
}
.photo-thumb, .photo { .photo-thumb, .photo {
padding: 0px; padding: 0px;
@ -19,3 +22,19 @@ body{
float: none; float: none;
margin: 0 auto; 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;
}
}

61
prototype/main.html
View file

@ -33,7 +33,7 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<!-- Static navbar --> <!-- Static navbar -->
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
@ -46,6 +46,7 @@
</button> </button>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
</div> </div>
<div class="navbar-collapse collapse"> <div class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Gallery</a></li> <li class="active"><a href="#">Gallery</a></li>
@ -54,6 +55,14 @@
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <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"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span> <span class="glyphicon glyphicon-user"></span>
@ -77,33 +86,51 @@
<div class="content"> <div class="content">
<div class="gallery"> <div class="gallery col-center col-md-11">
<div class="row col-center col-md-11"> <div class="row">
<div class="grid folder-grid"> <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"
<div class="grid-item folder-thumb col-md-2 col-sm-3 col-xs-4"><img class="img-responsive" src="img/folder1.jpg" /></div> 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"
<div class="grid-item folder-thumb col-md-2 col-sm-3 col-xs-4"><img class="img-responsive" src="img/folder3.jpg" /></div> 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> </div>
<hr> <hr>
</div> </div>
<div class="row col-center col-md-11"> <div class="row">
<div class="grid image-grid"> <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"
<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> src="http://lorempixel.com/400/200"/>
<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>
<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"
<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> src="http://lorempixel.com/400/400"/>
<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>
<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"
<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> 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> </div>
</div> <!-- /gallery --> </div> <!-- /gallery -->
</div> <!-- /content --> </div> <!-- /content -->
</div> <!-- /container --> </div> <!-- /container -->
</body> </body>
</html> </html>