devol/wallabag
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bring tags on entries view to baggy

Browse Source 
Also, a couple of UI improvement and CSS fixing
This commit is contained in:
Thomas Citharel 2016-07-01 13:59:30 +02:00
parent 9dbd3e9302
commit 1d4d9aaf29
No known key found for this signature in database
GPG Key ID: 5780691F5FE48FB5
4 changed files with 137 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
app/Resources/static/themes/baggy/css/main.css
View File

@ -84,7 +84,7 @@ a {
} }
a.nostyle { a.nostyle {
text-decoration: none; text-decoration: none;
} }
a:hover, a:hover,
@ -146,7 +146,6 @@ input[type="submit"] {
cursor: pointer; cursor: pointer;
background-color: #000; background-color: #000;
color: #fff; color: #fff;
border: 0;
padding: 0.5em 1em; padding: 0.5em 1em;
display: inline-block; display: inline-block;
border: 1px solid #000; border: 1px solid #000;
@ -202,7 +201,7 @@ h2::after {
} }
#main { #main {
margin-left: 13em; margin-left: 12em;
position: relative; position: relative;
z-index: 10; z-index: 10;
padding-right: 5%; padding-right: 5%;
@ -287,7 +286,6 @@ h2::after {
#display-mode { #display-mode {
float: right; float: right;
vertical-align: middle;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
opacity: 0.5; opacity: 0.5;
@ -359,6 +357,46 @@ footer a {
margin-left: 0 !important; margin-left: 0 !important;
} }
.card-entry-labels {
position: absolute;
top: 100px;
left: -1em;
z-index: 90;
max-width: 50%;
padding-left: 0;
}
.card-entry-labels li {
margin: 10px 10px 10px auto;
padding: 5px 12px 5px 25px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 0 3px 3px 0;
color: #fff;
cursor: default;
max-height: 2em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-entry-tags {
max-height: 2em;
overflow-y: hidden;
padding: 0;
}
.card-entry-tags li {
display: inline-block;
margin: 0 5px;
padding: 5px 12px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 3px;
max-height: 2em;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
}
.list-entries + .results { .list-entries + .results {
margin-bottom: 2em; margin-bottom: 2em;
} }
@ -383,10 +421,11 @@ footer a {
width: 32%; width: 32%;
margin-bottom: 1.5em; margin-bottom: 1.5em;
vertical-align: top; vertical-align: top;
margin-left: 1.5%; margin-right: 1%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding: 1.5em 1.5em 3em 1.5em; padding: 1.5em 1.5em 3em;
height: 440px;
} }
.entry::before { .entry::before {
@ -394,7 +433,7 @@ footer a {
width: 0; width: 0;
height: 0; height: 0;
border-style: solid; border-style: solid;
border-color: transparent transparent #000 transparent; border-color: transparent transparent #000;
border-width: 10px; border-width: 10px;
position: absolute; position: absolute;
bottom: 0.3em; bottom: 0.3em;
@ -442,6 +481,9 @@ footer a {
text-transform: none; text-transform: none;
margin-bottom: 0; margin-bottom: 0;
line-height: 1.2; line-height: 1.2;
text-align: justify;
-moz-text-align-last: center;
text-align-last: center;
} }
.entry h2::after { .entry h2::after {
@ -461,7 +503,9 @@ footer a {
} }
img.preview { img.preview {
max-width: 100%; max-width: calc(100% + 3em);
left: -1.5em;
position: relative;
} }
.entry p { .entry p {
@ -653,7 +697,7 @@ div.pagination ul .current {
.add-to-wallabag-link-after { .add-to-wallabag-link-after {
background-color: #000; background-color: #000;
color: #fff; color: #fff;
padding: 0 3px 2px 3px; padding: 0 3px 2px;
} }
a.add-to-wallabag-link-after { a.add-to-wallabag-link-after {
@ -682,7 +726,7 @@ a.add-to-wallabag-link-after::after {
} }
.btn-clickable { .btn-clickable {
cursor: pointer; cursor: pointer;
} }
/* ========================================================================== /* ==========================================================================
@ -706,6 +750,7 @@ a.add-to-wallabag-link-after::after {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(../fonts/MaterialIcons-Regular.eot); src: url(../fonts/MaterialIcons-Regular.eot);
/* For IE6-8 */ /* For IE6-8 */
src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype"); src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype");
} }
@ -727,6 +772,7 @@ a.add-to-wallabag-link-after::after {
/* Support for all WebKit browsers. */ /* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */ /* Support for Safari and Chrome. */
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -1045,30 +1091,30 @@ pre code {
} }
#download-form { #download-form {
position: fixed; position: fixed;
width: 10%; width: 10%;
height: 100%; height: 100%;
top: 0; top: 0;
right: 0; right: 0;
background-color: #fff; background-color: #fff;
padding: 15px; padding: 15px;
padding-right: 30px; padding-right: 30px;
padding-top: 30px; padding-top: 30px;
border-left: 1px #333 solid; border-left: 1px #333 solid;
z-index: 12; z-index: 12;
min-width: 200px; min-width: 200px;
} }
#download-form li { #download-form li {
display: block; display: block;
padding: .5em 2em .5em 1em; padding: 0.5em 2em 0.5em 1em;
color: #fff; color: #fff;
position: relative; position: relative;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
font-weight: 400; font-weight: 400;
font-family: PT Sans,sans-serif; font-family: PT Sans, sans-serif;
transition: all .5s ease; transition: all 0.5s ease;
} }
/* ========================================================================== /* ==========================================================================
@ -1148,7 +1194,6 @@ pre code {
} }
.login .logo { .login .logo {
width: auto;
height: auto; height: auto;
top: 0.5em; top: 0.5em;
width: 75px; width: 75px;
@ -1197,6 +1242,10 @@ pre code {
margin-top: 3em; margin-top: 3em;
} }
.card-entry-labels {
display: none;
}
#article_toolbar .topPosF { #article_toolbar .topPosF {
display: none; display: none;
} }

87
app/Resources/static/themes/material/css/main.css
View File

@ -34,6 +34,7 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(../fonts/MaterialIcons-Regular.eot); src: url(../fonts/MaterialIcons-Regular.eot);
/* For IE6-8 */ /* For IE6-8 */
src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype"); src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype");
} }
@ -55,6 +56,7 @@
/* Support for all WebKit browsers. */ /* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */ /* Support for Safari and Chrome. */
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -123,11 +125,11 @@ main,
} }
.pagination { .pagination {
float: right; float: right;
} }
.pagination ul { .pagination ul {
margin: 0 !important; margin: 0 !important;
} }
.pagination li { .pagination li {
@ -141,8 +143,8 @@ main,
} }
.pagination .disabled { .pagination .disabled {
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
} }
div.pagination ul .prev.disabled, div.pagination ul .prev.disabled,
@ -151,10 +153,10 @@ div.pagination ul .next.disabled {
} }
.pagination li.active span { .pagination li.active span {
padding: 0px 10px; padding: 0 10px;
height: 30px; height: 30px;
display: block; display: block;
color: #fff; color: #fff;
} }
.page-footer .footer-copyright p { .page-footer .footer-copyright p {
@ -266,9 +268,9 @@ nav input {
.side-nav .collapsible-header, .side-nav .collapsible-header,
.side-nav.fixed .collapsible-header { .side-nav.fixed .collapsible-header {
height: 45px; height: 45px;
line-height: 44px; line-height: 44px;
padding: 0 20px; padding: 0 20px;
} }
.bold > a { .bold > a {
@ -343,41 +345,41 @@ main ul.row {
} }
.card .card-entry-labels { .card .card-entry-labels {
position: absolute; position: absolute;
top:10px; top: 10px;
z-index: 90; z-index: 90;
max-width: 50%; max-width: 50%;
} }
.card .card-entry-labels li { .card .card-entry-labels li {
margin: 10px 10px 10px auto; margin: 10px 10px 10px auto;
padding: 5px 12px 5px 16px; padding: 5px 12px 5px 16px;
background-color: rgba(0,151,167,0.85); background-color: rgba(0, 151, 167, 0.85);
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
color: #fff; color: #fff;
cursor: default; cursor: default;
max-height: 2em; max-height: 2em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.card .card-entry-labels-hidden { .card .card-entry-labels-hidden {
margin-top: 5px; margin-top: 5px;
} }
.card .card-entry-labels-hidden li { .card .card-entry-labels-hidden li {
display: inline-block; display: inline-block;
background-color: rgba(0,151,167,0.85); background-color: rgba(0, 151, 167, 0.85);
margin: 0 5px; margin: 0 5px;
padding: 5px 12px; padding: 5px 12px;
border-radius: 3px; border-radius: 3px;
color: #fff; color: #fff;
max-height: 2em; max-height: 2em;
max-width: calc(100% - 15px); max-width: calc(100% - 15px);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.card .card-content .estimatedTime { .card .card-content .estimatedTime {
@ -491,7 +493,7 @@ main ul.row {
} }
#article aside .chip { #article aside .chip {
background-color: rgba(0,151,167,0.85); background-color: rgba(0, 151, 167, 0.85);
color: #fff; color: #fff;
padding: 0 15px 0 10px; padding: 0 15px 0 10px;
} }
@ -517,7 +519,7 @@ main ul.row {
} }
.pagination { .pagination {
width: auto; width: auto;
} }
.reader-mode { .reader-mode {
width: 240px !important; width: 240px !important;
} }
@ -534,7 +536,8 @@ main ul.row {
.indicator { .indicator {
display: none; display: none;
} }
.pagination li.prev, .pagination li.next { .pagination li.prev,
.pagination li.next {
width: auto; width: auto;
} }
} }
@ -633,8 +636,8 @@ footer [class*=" icon-"] {
padding-right: 10px; padding-right: 10px;
} }
footer [class^="icon-"]::hover, footer [class^="icon-"]:hover,
footer [class*=" icon-"]::hover { footer [class*=" icon-"]:hover {
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
} }

10
src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig
View File

@ -28,7 +28,17 @@
</ul> </ul>
{% if entry.previewPicture is null %} {% if entry.previewPicture is null %}
<p>{{ entry.content|striptags|slice(0, 300) }}&hellip;</p> <p>{{ entry.content|striptags|slice(0, 300) }}&hellip;</p>
<ul class="card-entry-tags">
{% for tag in entry.tags %}
<li>{{ tag.label }}</li>
{% endfor %}
</ul>
{% else %} {% else %}
<ul class="card-entry-labels">
{% for tag in entry.tags | slice(0, 3) %}
<li>{{ tag.label }}</li>
{% endfor %}
</ul>
<img class="preview" src="{{ entry.previewPicture }}" alt="{{ entry.title|raw }}" /> <img class="preview" src="{{ entry.previewPicture }}" alt="{{ entry.title|raw }}" />
{% endif %} {% endif %}
</div> </div>

2
src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
View File

@ -77,7 +77,7 @@
<p>{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;</p> <p>{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;</p>
<ul class="card-entry-labels-hidden"> <ul class="card-entry-tags">
{% for tag in entry.tags %} {% for tag in entry.tags %}
<li>{{ tag.label }}</li> <li>{{ tag.label }}</li>
{% endfor %} {% endfor %}