templates: use .panel for raised areas

website/agenda/planung/css/default.css

@@ -204,35 +204,26 @@ a {
     background: #fff;
 }
 
-#content textarea {
-    font-weight: normal;
-}
-
-div.editor {
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-
 #content .panel {
-    border: 1px solid rgba(0, 0, 0, .03);
+    background:white;
-    box-shadow: 0 2px 2px rgba(0, 0, 0, .24), 0 0 2px rgba(0, 0, 0, .12);
     margin: 4px;
+    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;
 }
 
 #content div.panel-header {
+    font-weight:bold;
     clear: both;
     text-align: left;
     align-content: center;
     align-items: center;
     display: flex;
     justify-content: center;
-    padding: 8px 20px;
+    padding: 0.5rem;
-    color: rgba(0, 0, 0, .54);
-    background: rgba(0, 0, 0, .03);
-}
-
-#content div.panel-body {
-    padding: 1rem;
 }
 
 #content .field {

website/agenda/planung/css/series.css

@@ -256,8 +256,12 @@ form {
     }
 }
 
-/*
+div.editor > form > table{
-#content .editor .row:nth-child(2n+1){
+    background:white;
-    background:#eee;
 }
-*/
+
+div.editor > form > table td{
+    padding-left:1rem;
+    padding-right:1rem;
+}
+

website/agenda/planung/roles.cgi

@@ -289,7 +289,7 @@ sub show_roles {
 		}
     }
 
-    $out .= '<hr>';
+    $out .= '<div class="panel">';
     $out .= '<table class="table">';
     my $localization = localization::get( $config, { user => $params->{presets}->{user}, file => 'roles' } );
     for my $key ( keys %$localization ) {

website/agenda/planung/templates/create-events.html

@@ -7,7 +7,7 @@
 </script>
 
 <h1>create events from schedule</h1>
-
+<div class="panel">
 <form id="create_event_form" method="post">
     <input type="hidden" name="project_id"
         value="<TMPL_VAR .project_id>"> <input type="hidden"
@@ -28,8 +28,8 @@
         value="create_events">create</button>
     </TMPL_IF>
 </form>
-
+</div>
-<div class="view" style="clear: both">
+<div class="panel view" style="clear: both">
     <TMPL_VAR action> <TMPL_VAR created_total>
     events from <TMPL_VAR from_date> till <TMPL_VAR till_date>
     <br>
@@ -37,6 +37,7 @@
     <TMPL_LOOP events> <TMPL_var start> <TMPL_var
         full_title> <br></TMPL_LOOP> </view>
 
+</div>
     </body>
     </html>
 

website/agenda/planung/templates/default.html

@@ -4,8 +4,6 @@
 
 <div id="bars" class="mobile" onclick="handleBars();return false;"> <a><img src="image/more.svg"> Menu</a></div>
 
-<div><a href="/" ><img src="image/preview.svg">&nbsp;<TMPL_VAR .loc.preview></a></div>
-
 <TMPL_IF .allow.read_event>
 <div><a id="menu_calendar" href="calendar.cgi?project_id=<TMPL_VAR project_id>&studio_id=<TMPL_VAR studio_id>"><img src="image/calendar.svg">&nbsp;<TMPL_VAR .loc.calendar></a></div>
 </TMPL_IF>
@@ -83,6 +81,8 @@
 <img src="image/arrow-down.svg">
 </div>
 
+<div><a href="/" ><img src="image/preview.svg">&nbsp;<TMPL_VAR .loc.preview></a></div>
+
 <div class="mobile"><a id="logout" href="<TMPL_VAR .presets.logout_url>?authAction=logout" expires="<TMPL_VAR .expires>"><img src="image/logout.svg">&nbsp;<TMPL_VAR .presets.user> <TMPL_VAR .loc.logout></a></div>
 
 </nav>

website/agenda/planung/templates/edit-event.html

@@ -52,7 +52,6 @@
     
             }
         );
-
     </script>
 
 </head>
@@ -266,7 +265,7 @@
     </TMPL_UNLESS>
     <!-- download output -->
     <TMPL_IF download>
-        <div type="hidden" name="event_id" ><TMPL_VAR download escape=none></div>
+        <div type="hidden" class="panel" name="event_id" ><TMPL_VAR download escape=none></div>
     </TMPL_IF>
 
 
@@ -575,7 +574,7 @@
 </div>
 
 <TMPL_IF .allow.read_comment>
-<div id="comments">
+<div id="comments" class="panel">
     <button id="showComment" onclick="showEventComments('<TMPL_VAR id>')"><TMPL_VAR .loc.label_comments></button>
     <div class="event" id="event_<TMPL_VAR id>_comments" style="line-height:100%;display:none;"> </div>
 </div>

website/agenda/planung/templates/edit-series.html

@@ -99,7 +99,7 @@
 
     <!-- edit template-->
     <TMPL_IF .allow.update_series_template>
-    <div id="tabs-template">
+    <div id="tabs-template" class="panel">
         
 	    <div id="edit_<TMPL_VAR .series_id>" class="editor"> 
 	    <form method="post" action="series.cgi?project_id=<TMPL_VAR .project_id>&studio_id=<TMPL_VAR .studio_id>&series_id=<TMPL_VAR .series_id>#tabs-template">
@@ -190,7 +190,7 @@
     </TMPL_IF>
 
     <!-- schedule -->
-    <div id="tabs-schedule">
+    <div id="tabs-schedule" class="panel">
         
 	    <!-- edit schedule -->
 		<TMPL_IF .allow.update_schedule>
@@ -451,7 +451,7 @@
     </div>
 
 	<!-- series events -->
-	<div id="tabs-events">
+	<div id="tabs-events" class="panel">
 		
 		<table class="table">
 		<TMPL_LOOP events>
@@ -484,7 +484,7 @@
 
 <TMPL_UNLESS has_single_events>
 	<!-- series members -->
-	<div id="tabs-members">
+	<div id="tabs-members" class="panel">
 		<table>
 
 		<!-- add members -->
@@ -604,7 +604,7 @@
     
     <!-- delete series -->
     <TMPL_IF .allow.delete_series>
-    <div id="tabs-delete">
+    <div id="tabs-delete" class="panel">
         <center>
         <div><TMPL_VAR .loc.label_delete_series></div>
         <div>
@@ -623,7 +623,9 @@
     </TMPL_IF>
 
 </TMPL_UNLESS> <!-- has single events-->
-	<div class="label right"><TMPL_VAR .loc.modified> <TMPL_VAR .loc.at> <TMPL_VAR modified_at> <TMPL_VAR .loc.by> <TMPL_VAR modified_by>.</div>
+	<div class="label right" 
+        style="background:none"
+    ><TMPL_VAR .loc.modified> <TMPL_VAR .loc.at> <TMPL_VAR modified_at> <TMPL_VAR .loc.by> <TMPL_VAR modified_by>.</div>
 
 </main>	    
 </body>

website/agenda/planung/templates/edit-work-time.html

@@ -37,6 +37,7 @@
 </div>
 
 <!-- edit schedule -->
+<div class="panel">
 <TMPL_IF .allow.update_schedule>
 <div id="edit_schedule_<TMPL_VAR .schedule_id>" class="editor">
 	<TMPL_LOOP schedule>
@@ -303,7 +304,7 @@
         </tbody>
     </table>
 </div>
-
+</div>
 </body>
 </html>
 

website/agenda/planung/templates/image-upload.html

@@ -1,6 +1,6 @@
 <script src="js/edit-image.js" type="text/javascript"></script>
 
-    <div class="editor">
+    <div class="editor" class="panel">
         <TMPL_IF action>
             <TMPL_IF error>
 	            <div class="error">failed</div>

website/agenda/planung/templates/image.html

@@ -66,12 +66,12 @@
 
     <!-- upload images -->
     <TMPL_IF .allow.create_image>
-    <div id="image-tabs-upload">
+    <div id="image-tabs-upload" class="panel">
     </div>
     </TMPL_IF>    
 </div>
 
-<div id="imageList">
+<div id="imageList" class="panel">
 
     <div style="clear:both; display:flex; flex-direction:row;">
         <div>

website/agenda/planung/templates/series.html

@@ -1,5 +1,5 @@
 <script>
-var region='<TMPL_VAR loc.region>';
+    var region='<TMPL_VAR loc.region>';
 </script>
 
 <h2><TMPL_VAR .loc.title></h2>

website/agenda/planung/templates/studio-timeslots.html

@@ -20,7 +20,7 @@
 
     <!-- schedule -->
     <TMPL_IF .allow.update_schedule>
-    <div id="tabs-schedule">
+    <div id="tabs-schedule" class="panel">
         
 	    <!-- edit schedule -->
 		<div id="edit_schedule" class="editor">
@@ -111,7 +111,7 @@
 	</TMPL_IF>
 
     <!-- show schedule -->
-    <div id="tabs-events">
+    <div id="tabs-events" class="panel">
         <div class="show_schedule_head"> <TMPL_VAR loc.label_select_range>
             <div id="show_date"> </div>
         </div>

website/agenda/planung/templates/studios.html

@@ -1,11 +1,14 @@
 <script src="js/image.js" type="text/javascript"></script>
+<script type="text/javascript">
+    var region='<TMPL_VAR loc.region>';
+</script>
 
 <h2><TMPL_VAR .loc.title></h2>
 
 <TMPL_IF .allow.update_studio>
 <div style="clear:both" class="newstudio">
 	<button onclick="add_studio('<TMPL_VAR name>')"><TMPL_VAR .loc.button_add_studio></button><br/>
-	<div id="edit_new" class="panel" style="clear:both;display:none">
+	<div id="edit_new" class="panel panel-body" style="clear:both;display:none">
 	    <form method="post">
 			<input type="hidden" name="project_id" value="<TMPL_VAR .project_id>">
 			<input type="hidden" name="studio_id"  value="<TMPL_VAR .studio_id>">

website/agenda/planung/templates/user-settings.html

@@ -44,6 +44,7 @@ div.col {
 </h2>
 <TMPL_INCLUDE status.html>
 
+<div class="panel">
 <form method="post">
     <input class="primary" type="hidden" name="action" value="save">
     <button onclick="$(this).submit()">
@@ -121,8 +122,9 @@ div.col {
         <TMPL_VAR loc.button_colors_reset>
     </button>
 </form>
+</div>
 
-
+<div class="panel">
 <h3 style="clear: both">
     <TMPL_VAR .loc.label_change_password>
 </h3>
@@ -147,6 +149,7 @@ div.col {
         <TMPL_VAR loc.button_change_password>
     </button>
 </form>
+</div>
 
 </body>
 </html>

website/agenda/planung/templates/user-stats.html

@@ -23,7 +23,6 @@ table#user_stats_table input{
 </style>
 
 <h2><TMPL_VAR loc.title></h2>
-<hr>
 <TMPL_INCLUDE status.html>
 
     <button class="text"
@@ -36,6 +35,7 @@ table#user_stats_table input{
         <input type="hidden" name="studio_id" value="<TMPL_VAR studio_id>">
     </form>
 
+<div class="panel">
     <table id="user_stats_table">
         <thead>
             <tr>
@@ -66,5 +66,6 @@ table#user_stats_table input{
             </TMPL_LOOP>
         </tbody>
     </table>
+</div>
 </body>
 </html>

website/agenda/planung/templates/users.html

@@ -82,7 +82,6 @@
 		}
 		return false;
 	}
-
 </script>
 
 <h2><TMPL_VAR .loc.title></h2>
@@ -91,7 +90,7 @@
 <TMPL_IF allow.create_user>
 <div style="clear:both" class="newuser">
 	<button onclick="add_user('<TMPL_VAR name>')"><TMPL_VAR .loc.button_add_user></button>
-	<div id="edit_new" class="user editor" style="display:none">
+	<div id="edit_new" class="user editor panel" style="display:none">
 		<form method="post">
 		<table>
 		<tr>	<td><TMPL_VAR .loc.label_name></td>		    <td><input name="user_name" 	 value="<TMPL_VAR user_name>"></td>	</tr>
@@ -110,6 +109,7 @@
 </div>
 </TMPL_IF>
 
+<div class="panel">
 <table class="table">
 <TMPL_LOOP users>
 	
@@ -216,6 +216,7 @@
 
 </TMPL_LOOP>
 </table>
+</div>
 
 </body>
 </html>