From c0b658abc030fc28241db4eab3d9ee171c323916 Mon Sep 17 00:00:00 2001
From: Milan <mc@radiopiloten.de>
Date: Sun, 23 Oct 2022 21:44:29 +0200
Subject: [PATCH] panels: update (especially for studios and projects)

---
 .../agenda/planung/css/audio-recordings.css   |  2 +-
 website/agenda/planung/css/default.css        | 40 ++++++---
 website/agenda/planung/css/projects.css       | 35 +++++++-
 website/agenda/planung/css/studios.css        | 40 ++++++++-
 website/agenda/planung/js/projects.js         | 11 ++-
 website/agenda/planung/js/studios.js          | 30 ++++---
 website/agenda/planung/pot/de/projects.po     |  7 +-
 website/agenda/planung/pot/en/projects.po     |  5 +-
 .../agenda/planung/templates/projects.html    | 81 ++++++++++---------
 website/agenda/planung/templates/studios.html | 35 ++++----
 10 files changed, 199 insertions(+), 87 deletions(-)

diff --git a/website/agenda/planung/css/audio-recordings.css b/website/agenda/planung/css/audio-recordings.css
index 16e8694..05fd94d 100644
--- a/website/agenda/planung/css/audio-recordings.css
+++ b/website/agenda/planung/css/audio-recordings.css
@@ -53,7 +53,7 @@ tr.inactive{
 }
 
 #progress_container div{
-    transition : width 3s linear;
+    transition : width 1s linear;
     text-align: center;
     padding: 1rem;
     color:white;
diff --git a/website/agenda/planung/css/default.css b/website/agenda/planung/css/default.css
index ad7adc8..59ed096 100644
--- a/website/agenda/planung/css/default.css
+++ b/website/agenda/planung/css/default.css
@@ -298,13 +298,23 @@ a {
 
 #content .panel {
     background:white;
-    margin: 4px;
+    margin: 1rem;
     padding: 1rem;
 
     border: 1px solid rgba(0, 0, 0, .03);
-    box-shadow: 0 2px 2px rgba(0, 0, 0, .24), 
-                0 0   2px rgba(0, 0, 0, .12);
-    border-radius:0.3rem;
+    border-radius:0.5rem;
+    position: relative;
+}
+
+#content .panel,
+#content div.card {
+    box-shadow: 0 1px 3px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.23);
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+#content .panel:hover,
+#content div.card:hover {
+  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 }
 
 #content div.panel-header {
@@ -445,7 +455,8 @@ div.badge-error {
 #content button,
 #content select,
 #content input {
-    padding: 0.5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
 }
 
 #content div.flex {
@@ -458,9 +469,7 @@ div.badge-error {
 #content div.card {
     border: 0;
     margin: 1em;
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .12), 0 2px 10px 0
-        rgba(0, 0, 0, .09);
-    border-radius: 0.3rem;
+    border-radius: 0.5rem;
 }
 
 #content table.table tr:hover {
@@ -541,7 +550,7 @@ table.tablesorter tr {
     text-align: center;
     text-decoration: none;
     min-width: 5rem;
-    border-radius: 0.3rem;
+    border-radius: 1rem;
     color: #fff;
     height: 2.3rem;
     position: relative;
@@ -639,7 +648,7 @@ input[type='checkbox'] {
 }
 
 input.image {
-    width: 16rem;
+    width: 28ch;
 }
 
 #content .select .option {
@@ -721,3 +730,14 @@ ul.tabContainer li:last-child{
 .right{
     margin-left:auto;
 }
+
+#content .right,
+.right{
+    margin-left:auto;
+}
+
+#content .bottom,
+.bottom{
+    margin-bottom:auto;
+}
+
diff --git a/website/agenda/planung/css/projects.css b/website/agenda/planung/css/projects.css
index c9ebf9f..0535287 100644
--- a/website/agenda/planung/css/projects.css
+++ b/website/agenda/planung/css/projects.css
@@ -1,12 +1,13 @@
+
 #content .label {
-    width: 10em;
+    width: 10ch;
     padding: 0;
     margin: 0;
     color: #555;
 }
 
 #content div.project {
-    width: 45%;
+    min-width: 40ch;
 }
 
 #content div.editor {
@@ -28,7 +29,7 @@
     padding: 0;
 }
 
-#content div.editor div.buttons button, 
+#content div.editor div.buttons button,
 #content div.editor div.buttons input {
     margin-left: 1em;
 }
@@ -36,3 +37,31 @@
 #content div.view {
     text-align: left;
 }
+
+#content div.flex{
+    align-items: inherit;
+}
+
+body #content{
+    max-width:none;
+}
+
+.buttons{
+    display: flex;
+}
+
+#content .bottom,
+.bottom{
+    position: absolute;
+    bottom: 1rem;
+}
+
+#content .bottom.right,
+.bottom.right{
+    position: absolute;
+    right: 1rem;
+}
+
+#content div.title {
+    font-size:1.5rem;
+}
diff --git a/website/agenda/planung/css/studios.css b/website/agenda/planung/css/studios.css
index 066f09e..465b4eb 100644
--- a/website/agenda/planung/css/studios.css
+++ b/website/agenda/planung/css/studios.css
@@ -1,16 +1,20 @@
 #content .label {
-    width: 10em;
+    width: 10ch;
     padding: 0;
     margin: 0;
     color: #555;
 }
 
 #content div.studio {
-    width: 45%;
+    min-width: 40ch;
 }
 
 #content div.editor {
-    display: inline-block;
+    clear: both;
+}
+
+#content div.view {
+    clear: both;
 }
 
 #content div.editor div.right {
@@ -31,5 +35,33 @@
 
 #content div.view {
     text-align: left;
-    clear: both;
 }
+
+#content div.flex{
+    align-items: inherit;
+}
+
+body #content{
+    max-width:none;
+}
+
+.buttons{
+    display: flex;
+}
+
+#content .bottom,
+.bottom{
+    position: absolute;
+    bottom: 1rem;
+}
+
+#content .bottom.right,
+.bottom.right{
+    position: absolute;
+    right: 1rem;
+}
+
+#content .panel{
+    min-height: 25rem;
+}
+
diff --git a/website/agenda/planung/js/projects.js b/website/agenda/planung/js/projects.js
index aa41cbf..0aaa1ea 100644
--- a/website/agenda/planung/js/projects.js
+++ b/website/agenda/planung/js/projects.js
@@ -17,21 +17,26 @@ function cancel_edit_project_assignments(name){
     return false;
 }
 
-function edit_project(name){
+function edit_project(elem, name){
+    
     if ($('#edit_'+name).css('display')=='none'){
         $('#view_'+name).hide();
         $('#assign_'+name).hide();
         $('#edit_'+name).show();
+        elem.text(elem.data("cancel"));
+        elem.addClass("text");
     }else{
-        cancel_edit_project(name);
+        cancel_edit_project(elem, name);
     }
     return false;
 }
 
-function cancel_edit_project(name){
+function cancel_edit_project(elem, name){
     $('#edit_'+name).hide();
     $('#assign_'+name).hide();
     $('#view_'+name).show();
+    elem.text(elem.data("action"));
+    elem.removeClass("text");
     return false;
 }
 
diff --git a/website/agenda/planung/js/studios.js b/website/agenda/planung/js/studios.js
index 95c3dc1..14958f1 100644
--- a/website/agenda/planung/js/studios.js
+++ b/website/agenda/planung/js/studios.js
@@ -1,22 +1,28 @@
 var region='<TMPL_VAR loc.region escape=js>';
 
-function edit_studio(name){
-    if ($('#edit_'+name).css('display')=='none'){
-        $('#view_'+name).hide();
-        $('#edit_'+name).show();
-    }else{
-        cancel_edit_studio(name);
-    }
-    return false;
-}
 function add_studio(){
     $('.editor').hide();
     $('#edit_new').show();
     return false;
 }
-function cancel_edit_studio(name){
-    $('#edit_'+name).hide();
-    $('#view_'+name).show();
+
+function edit_studio(elem, name){
+    if ($('#edit_'+name).css('display')=='none'){
+        $('#view_'+name).hide();
+        $('#edit_'+name).show();
+        elem.text(elem.data("cancel"));
+        elem.addClass("text");
+    }else{
+        cancel_edit_studio(elem, name);
+    }
+    return false;
+}
+
+function cancel_edit_studio(elem, name){
+    $('#edit_'+name).hide();
+    $('#view_'+name).show();
+    elem.text(elem.data("action"));
+    elem.removeClass("text");
     return false;
 }
 
diff --git a/website/agenda/planung/pot/de/projects.po b/website/agenda/planung/pot/de/projects.po
index a61a3fa..d64ba9a 100644
--- a/website/agenda/planung/pot/de/projects.po
+++ b/website/agenda/planung/pot/de/projects.po
@@ -26,7 +26,7 @@ msgid "button_edit"
 msgstr "Bearbeiten"
 
 msgid "button_change"
-msgstr "Ändern"
+msgstr "Studios zuordnen"
 
 msgid "button_create"
 msgstr "Anlegen"
@@ -61,11 +61,14 @@ msgstr "Start"
 msgid "label_end_date"
 msgstr "Ende"
 
+msgid "label_activity"
+msgstr "aktiv"
+
 msgid "label_image"
 msgstr "Logo"
 
 msgid "label_email"
-msgstr "email"
+msgstr "E-Mail"
 
 msgid "label_studios"
 msgstr "Studios"
diff --git a/website/agenda/planung/pot/en/projects.po b/website/agenda/planung/pot/en/projects.po
index ca3e788..e674b12 100644
--- a/website/agenda/planung/pot/en/projects.po
+++ b/website/agenda/planung/pot/en/projects.po
@@ -44,7 +44,7 @@ msgid "button_edit"
 msgstr "edit"
 
 msgid "button_change"
-msgstr "change"
+msgstr "edit studios"
 
 msgid "button_show_changes"
 msgstr "show changes"
@@ -64,6 +64,9 @@ msgstr "start date"
 msgid "label_end_date"
 msgstr "end date"
 
+msgid "label_activity"
+msgstr "active"
+
 msgid "label_image"
 msgstr "logo"
 
diff --git a/website/agenda/planung/templates/projects.html b/website/agenda/planung/templates/projects.html
index 53bb18a..fcc6ba3 100644
--- a/website/agenda/planung/templates/projects.html
+++ b/website/agenda/planung/templates/projects.html
@@ -23,7 +23,7 @@
                 <tr>
                     <td></td>
                     <td class="buttons">
-                        <button class="cancel" onclick="cancel_edit_project('new');return false;"><TMPL_VAR .loc.button_cancel></button>
+                        <button class="text cancel" onclick="cancel_edit_project($(this),'new');return false;"><TMPL_VAR .loc.button_cancel></button>
                         <button type=submit name="action" value="save"><TMPL_VAR .loc.button_create></button>
                     </td>
                 </tr>
@@ -40,38 +40,39 @@
     <!-- buttons -->
     <div class="panel-header">
         <div class="title"><TMPL_VAR title></div>
-        <TMPL_IF .allow.update_project>
-            <button class="text" onclick="edit_project('<TMPL_VAR project_id escape=js>')"
-            ><TMPL_VAR .loc.button_edit></button>
-        </TMPL_IF>
     </div>
 
     <!-- view project -->
     <div id="view_<TMPL_VAR project_id>" class="panel-body">
         <table>
-            <tr><td class="label"><TMPL_VAR .loc.label_image></td>      <td colspan="2"><img src="show-image.cgi?project_id=<TMPL_VAR .project_id>&studio_id=<TMPL_VAR .studio_id>&filename=<TMPL_VAR image>&type=thumbs"> &nbsp;</td></tr>
-            <tr><td class="label"><TMPL_VAR .loc.label_name></td>       <td colspan="2"><TMPL_VAR name> &nbsp;</td></tr>
-            <tr><td class="label"><TMPL_VAR .loc.label_subtitle></td>   <td colspan="2"><TMPL_VAR subtitle> &nbsp;</td></tr>
-            <tr><td class="label"><TMPL_VAR .loc.label_start_date></td> <td colspan="2"><TMPL_VAR start_date> &nbsp;</td></tr>
-            <tr><td class="label"><TMPL_VAR .loc.label_end_date></td>   <td colspan="2"><TMPL_VAR end_date> &nbsp;</td></tr>
-            <tr><td class="label"><TMPL_VAR .loc.label_email></td>      <td colspan="2"><TMPL_VAR email> &nbsp;</td></tr>
+            <TMPL_IF image>
+            <tr><td class="label"><TMPL_VAR .loc.label_image></td>
+                <td><img src="show-image.cgi?project_id=<TMPL_VAR .project_id>&studio_id=<TMPL_VAR .studio_id>&filename=<TMPL_VAR image>&type=thumbs"> &nbsp;</td>
+            </tr>
+            </TMPL_IF>
+            <tr><td class="label"><TMPL_VAR .loc.label_name></td>       <td><TMPL_VAR name> &nbsp;</td></tr>
+            <TMPL_IF subtitle><tr><td class="label"><TMPL_VAR .loc.label_subtitle></td>   <td><TMPL_VAR subtitle> &nbsp;</td></tr></TMPL_IF>
+            <tr><td class="label"><TMPL_VAR .loc.label_activity></td> 
+                <td><TMPL_VAR start_date> - <TMPL_VAR end_date></td>
+            </tr>
+            <TMPL_IF email><tr><td class="label"><TMPL_VAR .loc.label_email></td>      <td><TMPL_VAR email> &nbsp;</td></tr></TMPL_IF>
             <tr><td class="label"><TMPL_VAR .loc.label_studios></td>
                 <td>
                 <TMPL_LOOP assigned_studios>
                     <TMPL_VAR name><br/>
-                </TMPL_LOOP><br/>
-                </td><td>
-                <TMPL_IF .allow.update_project>
-                    <button onclick="edit_project_assignments('<TMPL_VAR project_id escape=js>')"
-                        class="text" style="float:left"
-                    ><TMPL_VAR .loc.button_change></button>
-                </TMPL_IF>
-                
-            </td></tr>
+                </TMPL_LOOP>
+                </td>
+            </tr>
         </table>
-        <div>
-        </div>
     </div>
+        <div style="display:flex">
+        <TMPL_IF .allow.update_project>
+            <button class="right bottom" onclick="edit_project($(this), '<TMPL_VAR project_id escape=js>')"
+                data-action="<TMPL_VAR .loc.button_edit escape=HTML>"
+                data-cancel="<TMPL_VAR .loc.button_cancel escape=HTML>"
+            ><TMPL_VAR .loc.button_edit></button>
+        </TMPL_IF>
+        </div>
 
     <TMPL_IF .allow.update_project>
     <!-- update project -->
@@ -84,40 +85,46 @@
             <input type="hidden" name="pid" value="<TMPL_VAR pid>">
             <table>
                 <tr><td class="label"><TMPL_VAR .loc.label_title></td>     <td><input name="title" value="<TMPL_VAR title>"></td></tr>
-                <tr><td class="label"><TMPL_VAR .loc.label_name></td>      <td><input name="name" value="<TMPL_VAR name>"></td></tr>
-                <tr><td class="label"><TMPL_VAR .loc.label_subtitle></td>  <td><input name="subtitle" value="<TMPL_VAR subtitle>"></td></tr>
-                <tr><td class="label"><TMPL_VAR .loc.label_start_date></td><td><input class="date" name="start_date" value="<TMPL_VAR start_date>"></td></tr>
-                <tr><td class="label"><TMPL_VAR .loc.label_end_date></td>  <td><input class="date" name="end_date" value="<TMPL_VAR end_date>"></td></tr>        
-                <tr><td class="label"><TMPL_VAR .loc.label_email></td>     <td><input name="email" value="<TMPL_VAR email>"></td></tr>        
                 <tr><td class="label">
                     <TMPL_VAR .loc.label_image></td>      
                     <td>
                         <button 
                             class="selectImage"
-                            onclick="selectImage('<TMPL_VAR name escape=HTML escape=js>', '<TMPL_VAR image  escape=js>', 'projects', '<TMPL_VAR .project_id escape=js>','<TMPL_VAR .studio_id escape=js>', null, null, '<TMPL_VAR pid escape=js>'); return false;"
+                            onclick="selectImage('<TMPL_VAR name escape=js>', '<TMPL_VAR image  escape=js>', 'projects', '<TMPL_VAR .project_id escape=js>','<TMPL_VAR .studio_id escape=js>', null, null, '<TMPL_VAR pid escape=js>'); return false;"
                         >
                             <img id="imagePreview" src="show-image.cgi?project_id=<TMPL_VAR .project_id>&studio_id=<TMPL_VAR .studio_id>&filename=<TMPL_VAR image>&type=icon">
                         </button>
                         <input id="image_<TMPL_VAR pid>" name="image" value="<TMPL_VAR image>" class="image" placeholder="<TMPL_VAR .loc.template_image>">
                     </td>
                 </tr>
+                <tr><td class="label"><TMPL_VAR .loc.label_name></td>      <td><input name="name" value="<TMPL_VAR name>"></td></tr>
+                <tr><td class="label"><TMPL_VAR .loc.label_subtitle></td>  <td><input name="subtitle" value="<TMPL_VAR subtitle>"></td></tr>
+                <tr><td class="label"><TMPL_VAR .loc.label_start_date></td><td><input class="date" name="start_date" value="<TMPL_VAR start_date>"></td></tr>
+                <tr><td class="label"><TMPL_VAR .loc.label_end_date></td>  <td><input class="date" name="end_date" value="<TMPL_VAR end_date>"></td></tr>        
+                <tr><td class="label"><TMPL_VAR .loc.label_email></td>     <td><input name="email" value="<TMPL_VAR email>"></td></tr>        
+
                 <tr>
                     <td></td>
                     <td class="buttons">
                         <button type=submit name="action" value="save"><TMPL_VAR .loc.button_save></button>
+                        <TMPL_IF .allow.delete_project>
+                            <div class="right">
+                                <button type=submit class="text" name="action" value="delete"
+                                onclick="commitForm('project_<TMPL_VAR project_id>','delete','<TMPL_VAR .loc.button_delete escape=js>');return false;"
+                                ><TMPL_VAR .loc.button_delete></button>
+                            </div>
+                        </TMPL_IF>
                     </td>
-                    <TMPL_IF .allow.delete_project>
-                    <td>
-                        <div class="right">
-                            <button type=submit class="text" name="action" value="delete"
-                            onclick="commitForm('project_<TMPL_VAR project_id>','delete','<TMPL_VAR .loc.button_delete escape=js>');return false;"
-                            ><TMPL_VAR .loc.button_delete></button>
-                        </div>
-                    </td>
-                    </TMPL_IF>
                 </tr>
             </table>
         </form>
+
+
+        <TMPL_IF .allow.update_project>
+        <button onclick="edit_project_assignments('<TMPL_VAR project_id escape=js>')"
+            class="text" style="float:left;margin:0;padding:0;text-align:left;"
+        ><TMPL_VAR .loc.button_change></button>
+        </TMPL_IF>
     </div>
     </TMPL_IF>
 
diff --git a/website/agenda/planung/templates/studios.html b/website/agenda/planung/templates/studios.html
index 1320936..4dd5e4b 100644
--- a/website/agenda/planung/templates/studios.html
+++ b/website/agenda/planung/templates/studios.html
@@ -20,7 +20,7 @@
 		        <tr>
 			        <td></td>
 			        <td class="buttons">
-				        <button class="text" onclick="cancel_edit_studio('new');return false;"><TMPL_VAR .loc.button_cancel></button>
+				        <button class="text" onclick="cancel_edit_studio($(this), 'new');return false;"><TMPL_VAR .loc.button_cancel></button>
 				        <button type=submit name="action" value="save"><TMPL_VAR .loc.button_create></button>
 			        </td>
 		        </tr>
@@ -36,23 +36,11 @@
 	<div class="panel-header">
 	    <TMPL_VAR name>
 	</div>
-	<div class="panel-body">
-	    <TMPL_IF .allow.update_studio>
-		    <button onclick="edit_studio('<TMPL_VAR id escape=js>')"><TMPL_VAR .loc.button_edit></button>
-	    </TMPL_IF>
-
-        <TMPL_IF .allow.read_event>
-            <button target="_blank" class="text"
-                onclick="load('event-history.cgi?project_id=<TMPL_VAR .project_id>&studio_id=<TMPL_VAR id>');"
-            ><TMPL_VAR .loc.button_show_changes></button>
-        </TMPL_IF>
-    </div>
 
 	<!-- view studio -->
 	<div id="view_<TMPL_VAR id>" class="panel-body">
 		<table>
 			<tr><td class="label"><TMPL_VAR .loc.label_image></td> 	         <td><img src="show-image.cgi?project_id=<TMPL_VAR .project_id>&studio_id=<TMPL_VAR .studio_id>&filename=<TMPL_VAR image>&type=thumbs"> &nbsp;</td></tr>
-			<tr><td class="label"><TMPL_VAR .loc.label_name></td> 	         <td><TMPL_VAR name> &nbsp;</td></tr>
 			<tr><td class="label"><TMPL_VAR .loc.label_description></td> 	 <td><TMPL_VAR description> &nbsp;</td></tr>
 			<tr><td class="label"><TMPL_VAR .loc.label_location></td> 	     <td><TMPL_VAR location> &nbsp;</td></tr>
 			<tr><td class="label"><TMPL_VAR .loc.label_stream></td> 	     <td><TMPL_VAR stream> &nbsp;</td></tr>
@@ -70,7 +58,9 @@
 			    <tr><td class="label"><TMPL_VAR .loc.label_name></td> 	         <td><input name="name" value="<TMPL_VAR name>"></td></tr>
 			    <tr><td class="label"><TMPL_VAR .loc.label_description></td>     <td><input name="description" value="<TMPL_VAR description>"></td></tr>
 			    <tr><td class="label"><TMPL_VAR .loc.label_location></td> 	     <td><input name="location" value="<TMPL_VAR location>"></td></tr>
-			    <tr><td class="label"><TMPL_VAR .loc.label_stream></td> 	     <td><input name="stream" value="<TMPL_VAR stream>"></td></tr>
+			    <TMPL_IF stream>
+                    <tr><td class="label"><TMPL_VAR .loc.label_stream></td> 	 <td><input name="stream" value="<TMPL_VAR stream>"></td></tr>
+                </TMPL_IF>
                 <tr><td class="label">
                     <TMPL_VAR .loc.label_image></td>      
                     <td>
@@ -95,6 +85,23 @@
 		    </table>
 		</form>
 	</div>
+
+	<div class="panel-body" style="display:flex">
+        <TMPL_IF .allow.read_event>
+            <button target="_blank" class="text bottom"
+                onclick="load('event-history.cgi?project_id=<TMPL_VAR .project_id>&studio_id=<TMPL_VAR id>');"
+            ><TMPL_VAR .loc.button_show_changes></button>
+        </TMPL_IF>
+
+	    <TMPL_IF .allow.update_studio>
+		    <button class="bottom right"
+                onclick="edit_studio($(this), '<TMPL_VAR id escape=js>')"
+                data-action="<TMPL_VAR .loc.button_edit escape=HTML>"
+                data-cancel="<TMPL_VAR .loc.button_cancel escape=HTML>"
+            ><TMPL_VAR .loc.button_edit></button>
+	    </TMPL_IF>
+    </div>
+
 	</TMPL_IF>
 </div>
 </TMPL_LOOP>