Compare commits

...

2 Commits

Author SHA1 Message Date
Timothy Warren aa1e6675c2 Use larger cover images for edit forms
timw4mail/HummingBirdAnimeClient/develop This commit looks good Details
2019-05-08 14:18:18 -04:00
Timothy Warren 9f585bf1b4 Edit form style tweaks 2019-05-08 14:17:57 -04:00
7 changed files with 37 additions and 23 deletions

View File

@ -16,9 +16,7 @@
<tbody>
<tr>
<td rowspan="9">
<article class="media">
<?= $helper->picture("images/anime/{$item['anime']['id']}.webp") ?>
</article>
<?= $helper->picture("images/anime/{$item['anime']['id']}-original.webp", "jpg", [], ["width" => "390"]) ?>
</td>
</tr>
<tr>
@ -95,7 +93,7 @@
<table class="form invisible">
<tbody>
<tr>
<td>
<td class="danger">
<strong>Permanently</strong> remove this list item and <strong>all</strong> its data?
</td>
<td>

View File

@ -6,9 +6,7 @@
<tbody>
<tr>
<td rowspan="6" class="align-center">
<article class="media">
<?= $helper->img($urlGenerator->assetUrl("images/anime/{$item['hummingbird_id']}.jpg")); ?>
</article>
<?= $helper->picture("images/anime/{$item['hummingbird_id']}-original.webp", "jpg", [], ["width" => "390"]) ?>
</td>
</tr>
<tr>
@ -49,13 +47,15 @@
</tbody>
</table>
</form>
<fieldset>
<legend>Danger Zone</legend>
<form class="js-delete" action="<?= $url->generate($collection_type . '.collection.delete') ?>" method="post">
<form class="js-delete" action="<?= $url->generate($collection_type . '.collection.delete') ?>" method="post">
<fieldset>
<legend>Danger Zone</legend>
<table class="form invisible">
<tbody>
<tr>
<td>&nbsp;</td>
<td class="danger">
<strong>Permanently</strong> remove this list item and <strong>all</strong> its data?
</td>
<td>
<input type="hidden" value="<?= $item['hummingbird_id'] ?>" name="hummingbird_id" />
<button type="submit" class="danger">Delete Entry</button>
@ -63,7 +63,7 @@
</tr>
</tbody>
</table>
</form>
</fieldset>
</fieldset>
</form>
</main>
<?php endif ?>

View File

@ -18,9 +18,7 @@
<tbody>
<tr>
<td rowspan="9">
<article class="media">
<?= $helper->img($urlGenerator->assetUrl('images/manga', "{$item['manga']['id']}.jpg")); ?>
</article>
<?= $helper->picture("images/manga/{$item['manga']['id']}-original.webp", "jpg", [], ["width" => "390"]) ?>
</td>
</tr>
<tr>
@ -96,7 +94,9 @@
<table class="form invisible">
<tbody>
<tr>
<td>&nbsp;</td>
<td class="danger">
<strong>Permanently</strong> remove this list item and <strong>all</strong> its data?
</td>
<td>
<input type="hidden" value="<?= $item['id'] ?>" name="id"/>
<input type="hidden" value="<?= $item['mal_id'] ?>" name="mal_id"/>

File diff suppressed because one or more lines are too long

View File

@ -53,9 +53,9 @@ small {
}
input, input[type], select, textarea {
border-color: #eee;
color: #eee;
background: #666;
border-color: #bbb;
color: #bbb;
background: #333;
padding:.8em;
}

View File

@ -1 +1 @@
a{color:#1978e2;text-shadow:var(--link-shadow)}a:hover{color:#9e34fd}body,legend,nav ul li a{background:#333;color:#eee}nav a:hover,nav li.selected a{border-color:#fff}header button{background:transparent}table{-webkit-box-shadow:none;box-shadow:none}td,th{border-color:#111}thead td,thead th{background:#333;color:#eee}tbody>tr:nth-child(2n){background:#555;color:#eee}tbody>tr:nth-child(odd){background:#333}footer,hr,legend{border-color:#ddd}small{color:#fff}input,input[type],select,textarea{border-color:#eee;color:#eee;background:#666;padding:.8em}button{background:#444;background:-webkit-gradient(linear,left top,left bottom,from(#666),color-stop(#555),color-stop(#444),color-stop(#555),to(#666));background:linear-gradient(#666,#555,#444,#555,#666);border-radius:.5em;margin:0;text-transform:none}button,button:hover{border-color:#ddd;color:#ddd}button:hover{background:#222;background:-webkit-gradient(linear,left top,left bottom,from(#444),color-stop(#333),color-stop(#222),color-stop(#333),to(#444));background:linear-gradient(#444,#333,#222,#333,#444)}button:active{background:#333;background:-webkit-gradient(linear,left top,left bottom,from(#333),to(#333));background:linear-gradient(#333,#333)}.media:hover button{background:-webkit-gradient(linear,left top,left bottom,from(#666),color-stop(#555),color-stop(#444),color-stop(#555),to(#666));background:linear-gradient(#666,#555,#444,#555,#666)}.media:hover button:hover{background:-webkit-gradient(linear,left top,left bottom,from(#444),color-stop(#555),color-stop(#666),color-stop(#555),to(#444));background:linear-gradient(#444,#555,#666,#555,#444)}.message,.static-message{text-shadow:var(--white-link-shadow)}.message.success,.static-message.success{background:#1f8454;border-color:#70dda9}.message.error,.static-message.error{border-color:#f3e6e6;background:#924949}.message.info,.static-message.info{border-color:#ffc;background:#bfbe3a}.invisible tbody>tr:nth-child(2n),.invisible tbody>tr:nth-child(odd),.invisible td,.invisible th,.invisible tr{background:transparent}#main-nav{border-bottom:.1rem solid #ddd}.tabs,.vertical-tabs{background:#333}.tabs>label,.vertical-tabs .tab label{background:#222;border:0;color:#eee}.vertical-tabs .tab label{width:100%}.tabs>label:hover,.vertical-tabs .tab>label:hover{background:#888}.tabs>label:active,.vertical-tabs .tab>label:active{background:#999}.tabs>[type=radio]:checked+label,.tabs>[type=radio]:checked+label+.content,.vertical-tabs [type=radio]:checked+label,.vertical-tabs [type=radio]:checked~.content{border:0;background:#666;color:#eee}.vertical-tabs{background:#222;border:1px solid #444}.vertical-tabs .tab{background:#666;border-bottom:1px solid #444}.streaming-logo{-webkit-filter:drop-shadow(0 0 2px #fff);filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="2" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(255,255,255,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');filter:drop-shadow(0 0 2px #fff)}
a{color:#1978e2;text-shadow:var(--link-shadow)}a:hover{color:#9e34fd}body,legend,nav ul li a{background:#333;color:#eee}nav a:hover,nav li.selected a{border-color:#fff}header button{background:transparent}table{-webkit-box-shadow:none;box-shadow:none}td,th{border-color:#111}thead td,thead th{background:#333;color:#eee}tbody>tr:nth-child(2n){background:#555;color:#eee}tbody>tr:nth-child(odd){background:#333}footer,hr,legend{border-color:#ddd}small{color:#fff}input,input[type],select,textarea{border-color:#bbb;color:#bbb;background:#333;padding:.8em}button{background:#444;background:-webkit-gradient(linear,left top,left bottom,from(#666),color-stop(#555),color-stop(#444),color-stop(#555),to(#666));background:linear-gradient(#666,#555,#444,#555,#666);border-radius:.5em;margin:0;text-transform:none}button,button:hover{border-color:#ddd;color:#ddd}button:hover{background:#222;background:-webkit-gradient(linear,left top,left bottom,from(#444),color-stop(#333),color-stop(#222),color-stop(#333),to(#444));background:linear-gradient(#444,#333,#222,#333,#444)}button:active{background:#333;background:-webkit-gradient(linear,left top,left bottom,from(#333),to(#333));background:linear-gradient(#333,#333)}.media:hover button{background:-webkit-gradient(linear,left top,left bottom,from(#666),color-stop(#555),color-stop(#444),color-stop(#555),to(#666));background:linear-gradient(#666,#555,#444,#555,#666)}.media:hover button:hover{background:-webkit-gradient(linear,left top,left bottom,from(#444),color-stop(#555),color-stop(#666),color-stop(#555),to(#444));background:linear-gradient(#444,#555,#666,#555,#444)}.message,.static-message{text-shadow:var(--white-link-shadow)}.message.success,.static-message.success{background:#1f8454;border-color:#70dda9}.message.error,.static-message.error{border-color:#f3e6e6;background:#924949}.message.info,.static-message.info{border-color:#ffc;background:#bfbe3a}.invisible tbody>tr:nth-child(2n),.invisible tbody>tr:nth-child(odd),.invisible td,.invisible th,.invisible tr{background:transparent}#main-nav{border-bottom:.1rem solid #ddd}.tabs,.vertical-tabs{background:#333}.tabs>label,.vertical-tabs .tab label{background:#222;border:0;color:#eee}.vertical-tabs .tab label{width:100%}.tabs>label:hover,.vertical-tabs .tab>label:hover{background:#888}.tabs>label:active,.vertical-tabs .tab>label:active{background:#999}.tabs>[type=radio]:checked+label,.tabs>[type=radio]:checked+label+.content,.vertical-tabs [type=radio]:checked+label,.vertical-tabs [type=radio]:checked~.content{border:0;background:#666;color:#eee}.vertical-tabs{background:#222;border:1px solid #444}.vertical-tabs .tab{background:#666;border-bottom:1px solid #444}.streaming-logo{-webkit-filter:drop-shadow(0 0 2px #fff);filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="2" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(255,255,255,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');filter:drop-shadow(0 0 2px #fff)}

View File

@ -68,7 +68,18 @@ thead td, thead th {
}
input[type=number] {
width: 4em;
min-width: 0;
width: 4.5em;
}
input[type=checkbox], input[type=radio] {
min-width: auto;
vertical-align: inherit;
}
input, textarea {
min-width: 30em;
min-width: 30rem;
}
tbody > tr:nth-child(odd) {
@ -218,6 +229,11 @@ td .media-wrap-flex {
/* color: #fff; */
}
td.danger, td.danger:hover, td.danger:active {
background-color: transparent;
color: #924949;
}
.user-btn {
background: transparent;
border-color: var(--edit-link-color);