arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added Infobox basic elements to index.html

Browse Source
This commit is contained in:
Tobias Reich 2014-12-28 23:51:13 +01:00
parent 2c0a9a489f
commit 404ebc2988
8 changed files with 28 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/main.css vendored
View File

Binary file not shown.

BIN
dist/main.js vendored
View File

Binary file not shown.

BIN
dist/view.js vendored
View File

Binary file not shown.

15
index.html
View File

@ -59,7 +59,7 @@
<a class="button right" id="button_trash_album" title="Delete Album">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#trash"></use></svg>
</a>
<a class="button right" id="button_info_album" title="Show Info">
<a class="button right" id="button_info_album" title="About Album">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#info"></use></svg>
</a>
<a class="button right" id="button_archive" title="Download Album">
@ -80,7 +80,7 @@
<a class="button right" id="button_trash" title="Delete">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#trash"></use></svg>
</a>
<a class="button right" id="button_info" title="Show Info">
<a class="button right" id="button_info" title="About Photo">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#info"></use></svg>
</a>
<a class="button right" id="button_move" title="Move">
@ -104,7 +104,16 @@
<div id="imageview"></div>
<!-- Infobox -->
<div id="infobox"></div>
<div id="infobox">
<div class='header'>
<h1>About</h1>
<a class='close' title='Close About'>
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#circle-x"></use></svg>
</a>
</div>
<div class='wrapper'>
</div>
</div>
<!-- Upload -->
<div id="upload">

16
src/scripts/build.coffee
View File

@ -8,9 +8,9 @@ window.build = {}
build.iconic = (icon, classes, path) ->
path = path || 'src/images/iconic.svg'
classes = classes || 'iconic'
classes = classes || ''
"<svg viewBox='0 0 8 8' class='#{ classes }'><use xlink:href='#{ path }##{ icon }'></use></svg>"
"<svg viewBox='0 0 8 8' class='iconic #{ classes }'><use xlink:href='#{ path }##{ icon }'></use></svg>"
build.divider = (title) ->
@ -264,10 +264,7 @@ build.tags = (tags, forView) ->
build.infoboxPhoto = (data, forView) ->
html = """
<div class='header'><h1>About</h1><a class='close'>#{ build.iconic('circle-x') }</a></div>
<div class='wrapper'>
"""
html = ""
switch data.public
when '0' then visible = 'No'
@ -355,17 +352,13 @@ build.infoboxPhoto = (data, forView) ->
html += """
</table>
<div class='bumper'></div>
</div>
"""
return html
build.infoboxAlbum = (data, forView) ->
html = """
<div class='header'><h1>About</h1><a class='close'>#{ build.iconic('circle-x') }</a></div>
<div class='wrapper'>
"""
html = ""
switch data.public
when '0' then visible = 'No'
@ -425,7 +418,6 @@ build.infoboxAlbum = (data, forView) ->
html += """
</table>
<div class='bumper'></div>
</div>
"""
return html

4
src/scripts/init.js
View File

@ -42,6 +42,9 @@ $(document).ready(function() {
/* Search */
$('#search').on('keyup click', function() { search.find($(this).val()) });
/* Infobox */
$('#infobox .header .close').on(event_name, view.infobox.hide);
/* Clear Search */
$('#clearSearch').on(event_name, function () {
$('#search').focus();
@ -55,7 +58,6 @@ $(document).ready(function() {
/* Infobox */
$('#infobox')
.on(event_name, '.header .close', view.infobox.hide)
.on(event_name, '#edit_title_album', function() { album.setTitle([album.getID()]) })
.on(event_name, '#edit_description_album', function() { album.setDescription(album.getID()) })
.on(event_name, '#edit_title', function() { photo.setTitle([photo.getID()]) })

8
src/scripts/view.js
View File

@ -360,14 +360,14 @@ view.album = {
password: function() {
if (album.json.password==1) $('#infobox .attr_password').html('Yes');
else $('#infobox .attr_password').html('No');
if (album.json.password==1) $('#infobox .attr_password').html('Yes');
else $('#infobox .attr_password').html('No');
},
infobox: function() {
if ((visible.album()||!album.json.init)&&!visible.photo()) lychee.infobox.html(build.infoboxAlbum(album.json)).show();
if ((visible.album()||!album.json.init)&&!visible.photo()) lychee.infobox.find('.wrapper').html(build.infoboxAlbum(album.json));
}
@ -495,7 +495,7 @@ view.photo = {
infobox: function() {
lychee.infobox.html(build.infoboxPhoto(photo.json)).show();
lychee.infobox.find('.wrapper').html(build.infoboxPhoto(photo.json));
}

11
src/styles/_infobox.scss
View File

@ -7,8 +7,8 @@
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .8);
}
@ -16,16 +16,15 @@
z-index: 4;
position: fixed;
right: 0px;
right: -370px;
width: 350px;
height: 100%;
background-color: rgba(20, 20, 20, .98);
box-shadow: -1px 0 2px rgba(0, 0, 0, .8);
display: none;
transform: translateX(370px);
transform: translateX(0);
transition: transform .3s cubic-bezier(.51, .92, .24, 1.15);
&.active { transform: translateX(50px); }
&.active { transform: translateX(-92%); }
/* Misc ------------------------------------------------*/
.wrapper {