panels: update (especially for studios and projects)

This commit is contained in:
Milan
2022-10-23 21:44:29 +02:00
parent 24b874e065
commit c0b658abc0
10 changed files with 199 additions and 87 deletions

View File

@@ -53,7 +53,7 @@ tr.inactive{
}
#progress_container div{
transition : width 3s linear;
transition : width 1s linear;
text-align: center;
padding: 1rem;
color:white;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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"

View File

@@ -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"

View File

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

View File

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