colwellkr/HummingBirdAnimeClient
1
0
Fork 0
forked from timw4mail/HummingBirdAnimeClient
Code Pull Requests Activity

First go at tabs for collection

Browse Source
This commit is contained in:
Timothy Warren 2018-08-08 17:04:35 -04:00
parent 7a1967b404
commit 28e4f22d7c
5 changed files with 108 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/views/collection/cover.php
View File

@ -5,14 +5,18 @@
<?php if (empty($sections)): ?>
<h3>There's nothing here!</h3>
<?php else: ?>
<div class="tabs">
<?php $i = 0; ?>
<?php foreach ($sections as $name => $items): ?>
<section class="status">
<input <?= $i === 0 ? 'checked="checked"' : '' ?> type="radio" id="collection-tab-<?= $i ?>" name="collection-tabs" />
<label for="collection-tab-<?= $i ?>"><?= $name ?></label>
<div class="content">
<h2><?= $name ?></h2>
<section class="media-wrap">
<?php foreach($items as $item): ?>
<?php foreach ($items as $item): ?>
<article class="media" id="a-<?= $item['hummingbird_id'] ?>">
<img src="<?= $urlGenerator->assetUrl("images/anime/{$item['hummingbird_id']}.jpg") ?>"
alt="<?= $item['title'] ?> cover image" />
alt="<?= $item['title'] ?> cover image"/>
<div class="name">
<a href="<?= $url->generate('anime.details', ['id' => $item['slug']]) ?>">
<?= $item['title'] ?>
@ -23,7 +27,8 @@
<?php if ($auth->isAuthenticated()): ?>
<div class="row">
<span class="edit">
<a class="bracketed" href="<?= $url->generate($collection_type . '.collection.edit.get', [
<a class="bracketed"
href="<?= $url->generate($collection_type . '.collection.edit.get', [
'id' => $item['hummingbird_id']
]) ?>">Edit</a>
</span>
@ -38,7 +43,9 @@
</article>
<?php endforeach ?>
</section>
</section>
</div>
<?php $i++; ?>
<?php endforeach ?>
</div>
<?php endif ?>
</main>

4
app/views/header.php
View File

@ -1,11 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title><?= $title ?></title>
<meta charset="utf-8" />
<meta http-equiv="cache-control" content="no-store" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self'" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=1" />
<link rel="stylesheet" href="<?= $urlGenerator->assetUrl('css/app.min.css') ?>" />
<link rel="icon" href="<?= $urlGenerator->assetUrl('images/icons/favicon.ico') ?>" />
<link rel="apple-touch-icon" sizes="57x57" href="<?= $urlGenerator->assetUrl('images/icons/apple-icon-57x57.png') ?>">

2
app/views/manga/edit.php
View File

@ -47,7 +47,7 @@
<tr>
<td><label for="volumes_read">Volumes Read</label></td>
<td>
<input type="text" disabled="disabled" min="0" name="volumes_read" id="volumes_read" value="-" /> / <?= $item['volumes']['total'] ?>
<?php /*<input type="number" disabled="disabled" min="0" name="volumes_read" id="volumes_read" value="" /> */ ?> - / <?= $item['volumes']['total'] ?>
</td>
</tr>
<tr>

2
public/css/app.min.css vendored
View File

File diff suppressed because one or more lines are too long

71
public/css/base.css
View File

@ -686,3 +686,74 @@ a:hover, a:active {
.loading-content .cssload-inner.cssload-three {
border-color: #fff
}
/* ----------------------------------------------------------------------------
CSS Tabs
-----------------------------------------------------------------------------*/
.tabs {
display: flex;
flex-wrap: wrap;
background: #efefef;
box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3);
margin-top: 1.5em;
}
.tabs label {
border: 1px solid #e5e5e5;
width: 100%;
padding: 20px 30px;
background: #e5e5e5;
cursor: pointer;
font-weight: bold;
font-size: 18px;
color: #7f7f7f;
transition: background 0.1s, color 0.1s;
/* margin-left: 4em; */
}
.tabs label:hover {
background: #d8d8d8;
}
.tabs label:active {
background: #ccc;
}
.tabs [type=radio]:focus + label {
box-shadow: inset 0px 0px 0px 3px #2aa1c0;
z-index: 1;
}
.tabs [type=radio] {
position: absolute;
opacity: 0;
}
.tabs [type=radio]:checked + label {
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
.tabs [type=radio]:checked + label + .content{
border: 1px solid #e5e5e5;
border-top: 0;
display: block;
padding: 20px 30px 30px;
background: #fff;
width: 100%;
}
.tabs .content {
display: none;
}
@media (min-width: 600px) {
.tabs label {
width: auto;
}
.tabs .content {
order: 99;
}
}