aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJeroen <jeroenpraat@xs4all.nl>2014-07-27 21:44:34 +0000
committerJeroen <jeroenpraat@xs4all.nl>2014-07-27 21:44:34 +0000
commit075fc6727762d4e45ddcae5843eec0100ad3ab72 (patch)
tree26c5b8b5c8064b0670510009d42f7b0ffac6c63d
parent73a0d8b5a7079e960717c46014b9255e16356ad2 (diff)
downloadvolse-hubzilla-075fc6727762d4e45ddcae5843eec0100ad3ab72.tar.gz
volse-hubzilla-075fc6727762d4e45ddcae5843eec0100ad3ab72.tar.bz2
volse-hubzilla-075fc6727762d4e45ddcae5843eec0100ad3ab72.zip
Improved photo view page. Added a delete button, stylized other button and rearangend divs a but. I even made a javascript function (copied is the right word). I changed the application (non-posts) font size (temporary) to 14px, same as button (btn) font size. I like to change all font sizes to 1.0rem (posts) and 0.8rem (application) in the near future, but I will test that first on my hub.
-rw-r--r--view/css/mod_photos.css19
-rw-r--r--view/js/main.js9
-rw-r--r--view/theme/redbasic/css/style.css29
-rw-r--r--view/theme/redbasic/php/style.php2
-rwxr-xr-xview/tpl/photo_view.tpl13
5 files changed, 59 insertions, 13 deletions
diff --git a/view/css/mod_photos.css b/view/css/mod_photos.css
index 58a9bea38..12032d4c1 100644
--- a/view/css/mod_photos.css
+++ b/view/css/mod_photos.css
@@ -11,6 +11,12 @@
margin-bottom: 25px;
}
+#photo-view-wrapper {
+ float:left;
+ min-width: 300px;
+ overflow: hidden;
+}
+
#photo-prev-link, #photo-next-link {
padding: 10px;
float: left;
@@ -136,8 +142,19 @@
}
#photo-edit-delete-button {
- margin-left: 200px;
+ float: right;
+}
+
+#photo-edit-edit-wrapper {
+ margin-top: 10px;
+ margin-bottom: 30px;
}
+
+#photo-photo-delete-button {
+ float: right;
+ margin-top: -64px;
+}
+
#photo-edit-end {
margin-bottom: 35px;
}
diff --git a/view/js/main.js b/view/js/main.js
index c803ad538..eeee9e3ab 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -156,6 +156,15 @@
}
}
+ function closeOpen(theID) {
+ if(document.getElementById(theID).style.display == "none") {
+ document.getElementById(theID).style.display = "block"
+ }
+ else {
+ document.getElementById(theID).style.display = "none"
+ }
+ }
+
function openMenu(theID) {
document.getElementById(theID).style.display = "block"
}
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 13510b55c..fb064ba88 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -81,13 +81,17 @@ input[type="submit"] {
font-weight: bold;
color: $input_linksubmit;
text-decoration: none;
+ padding: 6px 12px;
+}
+
+input[type="submit"]:hover {
+ text-decoration: underline;
}
button, input, optgroup, select, textarea {
color: #000;
}
-
pre code {
border: none;
}
@@ -637,12 +641,12 @@ aside li {
.photo-album-image-wrapper .caption {
- background-color: rgba(245, 245, 255, 0.8);
- border-bottom: 2px solid #CCC;
+ background-color: $acpopup_bgcolour;
+ border-bottom: 2px solid $acpopup_bordercolour;
}
.photo-top-album-name {
- background-color: rgb(255, 255, 255);
+ background-color: $acpopup_bgcolour;
}
#photos-upload-perms-menu, #photos-upload-perms-menu:visited, #photos-upload-perms-menu:link {
@@ -1236,7 +1240,6 @@ brain is weird like that */
padding:5px;
}
-
/**
* Plugins settings
*/
@@ -2347,19 +2350,27 @@ blockquote {
}
}
+.btn {
+ font-size: $body_font_size;
+}
+
+.btn-xs {
+ font-size: 12px;
+}
+
.btn-default {
background-color: $editbuttons_bgcolour;
border-color: $editbuttons_bordercolour;
- color: $editbuttons_colour;
+ color: $editbuttons_colour;
text-shadow: none;
box-shadow: none;
}
.btn-default:hover, .btn-default:focus, .btn-default:active .btn-default.active {
background-color: $editbuttons_bghover;
- border-color: $editbuttons_bordercolourhover;
- color: $input_colourhover;
- text-decoration: $input_decohover;
+ border-color: $editbuttons_bordercolourhover;
+ color: $input_colourhover;
+ text-decoration: $input_decohover;
}
.btn-default.btn-sm:hover, .btn-default.btn-sm:focus, .btn-default.btn-sm:active .btn-default.btn-sm.active {
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 23d9c695f..9d42bbf69 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -132,7 +132,7 @@ if(! $a->install) {
if (! $font_size)
$font_size = "1.0em";
if (! $body_font_size)
- $body_font_size = "11px";
+ $body_font_size = "14px";
if (! $font_colour)
$font_colour = "#4d4d4d";
if (! $selected_active_colour)
diff --git a/view/tpl/photo_view.tpl b/view/tpl/photo_view.tpl
index 0c16eb362..25bb58d74 100755
--- a/view/tpl/photo_view.tpl
+++ b/view/tpl/photo_view.tpl
@@ -9,8 +9,8 @@
</div>
{{if $prevlink}}<div id="photo-prev-link"><a href="{{$prevlink.0}}"><i class="icon-backward photo-icons"></i></div>{{/if}}
+<div id="photo-view-wrapper">
<div id="photo-photo"><a href="{{$photo.href}}" title="{{$photo.title}}" onclick="$.colorbox({href: '{{$photo.href}}'}); return false;"><img style="max-width: 100%;" src="{{$photo.src}}"></a></div>
-{{if $nextlink}}<div id="photo-next-link"><a href="{{$nextlink.0}}"><i class="icon-forward photo-icons"></i></a></div>{{/if}}
<div id="photo-photo-end"></div>
<div id="photo-caption">{{$desc}}</div>
{{if $tags}}
@@ -22,7 +22,7 @@
{{/if}}
{{if $edit}}
-<div id="photo-edit-edit-wrapper" class="fakelink" onclick="openClose('photo-edit-edit');">{{$edit.edit}}</div>
+<div id="photo-edit-edit-wrapper" class="btn btn-default fakelink" onclick="openClose('photo-edit-edit'); closeOpen('photo-photo-delete-button')">{{$edit.edit}}</div>
<div id="photo-edit-edit" style="display: none;">
<form action="photos/{{$edit.nickname}}/{{$edit.resource_id}}" method="post" id="photo_edit_form">
@@ -77,6 +77,11 @@
</div>
{{/if}}
+
+<form action="photos/{{$edit.nickname}}/{{$edit.resource_id}}" method="post">
+ <input id="photo-photo-delete-button" type="submit" name="delete" value="{{$edit.delete}}" onclick="return confirmDelete();">
+</form>
+
{{if $likebuttons}}
<div id="photo-like-div">
{{$likebuttons}}
@@ -87,5 +92,9 @@
{{$comments}}
+</div>
+
+{{if $nextlink}}<div id="photo-next-link"><a href="{{$nextlink.0}}"><i class="icon-forward photo-icons"></i></a></div>{{/if}}
+
{{$paginate}}