GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[COMPONENTS][CSS] Adding components styling properly.

Browse Source
This commit is contained in:
Eliseu Amaro 2021-10-01 17:25:51 +01:00
parent 441c411efe
commit d38ad60c76
15 changed files with 101 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/Left/Left.php
View File

@ -19,8 +19,21 @@
namespace Component\Left;
use App\Core\Event;
use App\Core\Modules\Component;
class Left extends Component
{
/**
* Output our dedicated stylesheet
*
* @param array $styles stylesheets path
*
* @return bool hook value; true means continue processing, false means stop.
*/
public function onEndShowStyles(array &$styles): bool
{
$styles[] = 'components/Left/assets/css/left.css';
return Event::next;
}
}

4
templates/left/view.html.twig → components/Left/templates/left/view.html.twig
View File

@ -1,7 +1,3 @@
{% block stylesheets %}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/components/left.css') }}">
{% endblock stylesheets %}
{% block leftpanel %}
<div class="panel panel-left">
<input type="checkbox" id="panel-left-toggle" aria-hidden="true" tabindex="-1">

13
components/Right/Right.php
View File

@ -19,8 +19,21 @@
namespace Component\Right;
use App\Core\Event;
use App\Core\Modules\Component;
class Right extends Component
{
/**
* Output our dedicated stylesheet
*
* @param array $styles stylesheets path
*
* @return bool hook value; true means continue processing, false means stop.
*/
public function onEndShowStyles(array &$styles): bool
{
$styles[] = 'components/Right/assets/css/right.css';
return Event::next;
}
}

4
templates/right/view.html.twig → components/Right/templates/right/view.html.twig
View File

@ -1,7 +1,3 @@
{% block stylesheets %}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/components/right.css') }}">
{% endblock stylesheets %}
{% block rightpanel %}
<div class="panel panel-right">
<input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">

2
plugins/Cover/Cover.php
View File

@ -94,7 +94,7 @@ class Cover extends Plugin
*/
public function onStartShowStyles(array &$styles): bool
{
$styles[] = 'cover/cover.css';
$styles[] = 'assets/css/cover.css';
return Event::next;
}
}

0
plugins/Cover/css/cover/cover.css → plugins/Cover/assets/css/cover.css
View File

70
public/assets/default_theme/css/core/base.css → public/assets/default_theme/css/base.css
View File

@ -1,11 +1,10 @@
@import url("../widgets/buttons.css");
@import url("../widgets/sections.css");
@import url("widgets/buttons.css");
@import url("widgets/sections.css");
@import url("widgets/feeds.css");
@import url("widgets/settings.css");
@import url("../../fonts/poppins/poppins.css");
@import url("../../fonts/opensans/opensans.css");
@import url("feed.css");
@import url("settings.css");
@import url("../fonts/poppins/poppins.css");
@import url("../fonts/opensans/opensans.css");
:root {
/* FONTS */
@ -46,7 +45,7 @@
.bg {
background-color: var(--bg1);
background-image: url("../../images/background_dark.png");
background-image: url("../images/background_dark.png");
}
body:after {
@ -64,7 +63,7 @@
}
select {
background-image: url("../../images/select_drop_dark.png") !important;
background-image: url("../images/select_drop_dark.png") !important;
}
}
@ -85,11 +84,11 @@
.bg {
background-color: var(--bg1);
background-image: url(../../images/background_light.png);
background-image: url(../images/background_light.png);
}
select {
background-image: url("../../images/select_drop_light.png") !important;
background-image: url("../images/select_drop_light.png") !important;
}
}
@ -324,14 +323,57 @@ and (max-width: 1280px) {
#panel-left-toggle:checked ~ .panel-content,
#panel-right-toggle:checked ~ .panel-content,
a[id|="anchor"]:target ~ .panel-content {
background-image: url(../../images/background_dark.png);
background-image: url(../images/background_dark.png);
}
}
@media (prefers-color-scheme: light) {
#panel-left-toggle:checked ~ .panel-content,
#panel-right-toggle:checked ~ .panel-content,
a[id|="anchor"]:target ~ .panel-content {
background-image: url(../../images/background_light.png);
background-image: url(../images/background_light.png);
}
}
}
}
/* ANIMATIONS */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: unset;
transform: none;
}
}
@keyframes fadeOut {
100% {
opacity: 0;
transform: translateY(-10px);
}
0% {
opacity: unset;
transform: none;
}
}
@keyframes highlight {
0% {
box-shadow: initial;
border-radius: var(--unit-size);
}
50% {
border-radius: var(--unit-size);
box-shadow: inset 0 20px 40px var(--white);
transition: box-shadow 0.3s ease-in-out;
}
100% {
box-shadow: initial;
border-radius: var(--unit-size);
}
}

90
public/assets/default_theme/css/core/opensans.css
View File

@ -1,90 +0,0 @@
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Italic'), local('OpenSans-Italic'),
url('OpenSans-Italic.woff') format('woff');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Light'), local('OpenSans-Light'),
url('OpenSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('OpenSans-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
url('OpenSans-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
url('OpenSans-SemiBoldItalic.woff') format('woff');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
url('OpenSans-ExtraBold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('OpenSans-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
url('OpenSans-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Italic'), local('OpenSans-Italic'),
url('OpenSans-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
url('OpenSans-LightItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
font-display: swap;
}

26
public/assets/default_theme/css/core/feed.css → public/assets/default_theme/css/widgets/feeds.css
View File

@ -123,24 +123,24 @@
}
.favourite-button-container {
-webkit-mask-image: url("../icons/heart.svg") !important;
-o-mask-image: url("../icons/heart.svg") !important;
-moz-mask-image: url("../icons/heart.svg") !important;
mask-image: url("../icons/heart.svg") !important;
-webkit-mask-image: url("../../icons/heart.svg") !important;
-o-mask-image: url("../../icons/heart.svg") !important;
-moz-mask-image: url("../../icons/heart.svg") !important;
mask-image: url("../../icons/heart.svg") !important;
}
.reply-button-container {
-webkit-mask-image: url("../icons/reply.svg") !important;
-o-mask-image: url("../icons/reply.svg") !important;
-moz-mask-image: url("../icons/reply.svg") !important;
mask-image: url("../icons/reply.svg") !important;
-webkit-mask-image: url("../../icons/reply.svg") !important;
-o-mask-image: url("../../icons/reply.svg") !important;
-moz-mask-image: url("../../icons/reply.svg") !important;
mask-image: url("../../icons/reply.svg") !important;
}
.repeat-button-container {
-webkit-mask-image: url("../icons/repeat.svg") !important;
-o-mask-image: url("../icons/repeat.svg") !important;
-moz-mask-image: url("../icons/repeat.svg") !important;
mask-image: url("../icons/repeat.svg") !important;
-webkit-mask-image: url("../../icons/repeat.svg") !important;
-o-mask-image: url("../../icons/repeat.svg") !important;
-moz-mask-image: url("../../icons/repeat.svg") !important;
mask-image: url("../../icons/repeat.svg") !important;
}
.note-actions-unset {
@ -169,7 +169,7 @@
border-radius: var(--unit-size);
background-color: var(--translucent);
padding: var(--smaller-size);
padding: var(--unit-size);
align-self: flex-start;
}

0
public/assets/default_theme/css/core/settings.css → public/assets/default_theme/css/widgets/settings.css
View File

0
public/assets/default_theme/css/components/left.css → public/components/Left/assets/css/left.css
View File

0
public/assets/default_theme/css/components/right.css → public/components/Right/assets/css/right.css
View File

4
src/Twig/Runtime.php
View File

@ -85,8 +85,8 @@ class Runtime implements RuntimeExtensionInterface, EventSubscriberInterface
public function getShowStylesheets()
{
$styles = [];
Event::handle('ShowStyles', [&$styles]);
return implode("\n", $styles);
Event::handle('EndShowStyles', [&$styles]);
return $styles;
}
/**

6
templates/base.html.twig
View File

@ -15,11 +15,11 @@
<link rel="preload" href="{{ asset('assets/default_theme/css/reset.css') }}" as="style" type="text/css">
<link rel="stylesheet" href="{{ asset('assets/default_theme/css/reset.css') }}">
<link rel="preload" href="{{ asset('assets/default_theme/css/core/base.css') }}" as="style" type="text/css">
<link rel="stylesheet" href="{{ asset('assets/default_theme/css/core/base.css') }}">
<link rel="preload" href="{{ asset('assets/default_theme/css/base.css') }}" as="style" type="text/css">
<link rel="stylesheet" href="{{ asset('assets/default_theme/css/base.css') }}">
{% for stylesheet in show_stylesheets() %}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/' ~ stylesheet) }}">
<link rel='stylesheet' type='text/css' href="{{ asset(stylesheet) }}">
{% endfor %}
{% endblock %}

2
templates/stdgrid.html.twig
View File

@ -2,8 +2,6 @@
{% block stylesheets %}
{{ parent() }}
{{ block("stylesheets", "/left/view.html.twig") }}
{{ block("stylesheets", "/right/view.html.twig") }}
{% endblock %}
{% block leftpanel %}