panels: update (especially for studios and projects)
This commit is contained in:
@@ -53,7 +53,7 @@ tr.inactive{
|
||||
}
|
||||
|
||||
#progress_container div{
|
||||
transition : width 3s linear;
|
||||
transition : width 1s linear;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color:white;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
|
||||
@@ -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"> </td></tr>
|
||||
<tr><td class="label"><TMPL_VAR .loc.label_name></td> <td colspan="2"><TMPL_VAR name> </td></tr>
|
||||
<tr><td class="label"><TMPL_VAR .loc.label_subtitle></td> <td colspan="2"><TMPL_VAR subtitle> </td></tr>
|
||||
<tr><td class="label"><TMPL_VAR .loc.label_start_date></td> <td colspan="2"><TMPL_VAR start_date> </td></tr>
|
||||
<tr><td class="label"><TMPL_VAR .loc.label_end_date></td> <td colspan="2"><TMPL_VAR end_date> </td></tr>
|
||||
<tr><td class="label"><TMPL_VAR .loc.label_email></td> <td colspan="2"><TMPL_VAR email> </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"> </td>
|
||||
</tr>
|
||||
</TMPL_IF>
|
||||
<tr><td class="label"><TMPL_VAR .loc.label_name></td> <td><TMPL_VAR name> </td></tr>
|
||||
<TMPL_IF subtitle><tr><td class="label"><TMPL_VAR .loc.label_subtitle></td> <td><TMPL_VAR subtitle> </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> </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>
|
||||
|
||||
|
||||
@@ -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"> </td></tr>
|
||||
<tr><td class="label"><TMPL_VAR .loc.label_name></td> <td><TMPL_VAR name> </td></tr>
|
||||
<tr><td class="label"><TMPL_VAR .loc.label_description></td> <td><TMPL_VAR description> </td></tr>
|
||||
<tr><td class="label"><TMPL_VAR .loc.label_location></td> <td><TMPL_VAR location> </td></tr>
|
||||
<tr><td class="label"><TMPL_VAR .loc.label_stream></td> <td><TMPL_VAR stream> </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>
|
||||
|
||||
Reference in New Issue
Block a user