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.

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}}