Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Iconization in Linklist and inline form

Browse Source
This commit is contained in:
reverend
2020-08-26 19:26:11 +02:00
parent 7865066adb
commit 6a1e281b3e
4 changed files with 178 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/03_Organisms/linkList/_linkList.scss
View File

@@ -2,23 +2,34 @@
@include RV-FlexGrid(300px, 3em); @include RV-FlexGrid(300px, 3em);
@include RV-ElementList; @include RV-ElementList;
@include RV-Spacing__Inner--small; @include RV-Spacing__Inner--small;
align-items: center;
.LP-LinkList__Item{ .LP-LinkList__Item{
border-left: 1px solid $-light-brown; border-left: 1px solid $-light-brown;
width: calc(100% - 1px); width: calc(100% - 1px);
overflow: hidden; overflow: hidden;
@include RV-Alignment--verticalCenter;
@include RV-FlexRow__Container;
.LP-LinkList__ItemHover {
opacity: 0.5;
@include RV-Alignment--right;
@include RV-FlexRow__Item--fixedSize(min-content);
}
&:hover { &:hover {
background-color: $-almost-white; background-color: $-almost-white;
.LP-LinkList__ItemHover {
opacity: 1;
}
} }
} }
.LP-Link{
height: 100%;
@include RV-Alignment--verticalCenter;
>* { .LP-Link {
@include RV-Spacing__Inner--small; @include RV-FlexRow__Item;
} @include RV-Spacing__Inner--small;
} }
.LP-LinkAdd{ .LP-LinkAdd{
@@ -27,7 +38,7 @@
.LP-LinkAdd__Container{ .LP-LinkAdd__Container{
position: relative; position: relative;
top: -15px; top: -39px;
.LP-Form__Fieldset{ .LP-Form__Fieldset{
@@ -52,6 +63,7 @@
.LP-LinkAdd__TriggerLabel{ .LP-LinkAdd__TriggerLabel{
cursor: pointer; cursor: pointer;
display: contents;
} }
.LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel{ .LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel{

123
components/03_Organisms/linkList/linkList.hbs
View File

@@ -1,63 +1,66 @@
<div class="LP-LinkList"> <div class="LP-LinkList">
<ul class="LP-LinkList__Container"> <ul class="LP-LinkList__Container">
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li> <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li> <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li> <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li> <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
<li class="LP-LinkList__Item"> <li class="LP-LinkList__Item">
<div class="RV-FlexRow__Container"> <a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a>
<a href="#" class="LP-Link RV-FlexRow__Item"><span class="LP-Text">OSM</span></a> <a href="google.com" class="LP-Link LP-LinkList__ItemHover">
<a href="#" class="LP-Link RV-FlexRow__Item RV-FlexRow__Item--fixedSize"> <div class="RV-Iconized__Container RV-Iconized__Container--small">
<div class="RV-Iconized__Container RV-Iconized__Container--small"> <svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
y="0px" viewBox="0 0 512 512" xml:space="preserve"> <g>
<g> <g>
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216 <path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717
L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859
c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287
l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285
L284.286,256.002z" />
</g>
</g>
</svg>
</div>
</a>
</li>
<li class="LP-LinkList__Item">
<input type="checkbox" id="checkbox123" class="LP-LinkAdd__Trigger" />
<label for="checkbox123" class="LP-LinkAdd__TriggerLabel">
<a class="LP-Link">
<div class="RV-Iconized__Container RV-Iconized__Container--small">
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
xml:space="preserve">
<g>
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
</g> </g>
</svg> </svg>
</div> <span class="RV-Iconized__Text">Link hinzufügen</span>
</a> </div>
</div> </a>
</li> </label>
<li class="LP-LinkList__Item LP-LinkList__Item--add"> <div class="LP-LinkAdd">
<input type="checkbox" id="checkbox123" class="LP-LinkAdd__Trigger"/> <span class="LP-LinkAdd__Container">
<label for="checkbox123" class="LP-LinkAdd__TriggerLabel"> <form class="LP-Form LP-Form--inline">
<a class="LP-Link"> <fieldset class="LP-Form__Fieldset">
<div class="RV-Iconized__Container RV-Iconized__Container--small"> <legend class="LP-Form__Legend">Basic data</legend>
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" <div class="LP-Form__Composition LP-Form__Composition--buttons">
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" <div class="LP-Form__Field LP-Form__Button LP-Input">
y="0px" viewBox="0 0 512 512" xml:space="preserve"> <input type="submit" class="LP-Button" value="Submit" />
<g> </div>
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216 <div class="LP-Form__Field LP-Form__Field--narrower">
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> <div class="LP-Input">
</g> <label for="input123" class="LP-Input__Label">Link URL</label>
</svg> <input type="text" id="input123" class="LP-Input__Field" />
<span class="RV-Iconized__Text">Link hinzufügen</span> </div>
</div> </div>
</a> </div>
</label> </fieldset>
<div class="LP-LinkAdd"> </form>
<span class="LP-LinkAdd__Container"> </span>
<form class="LP-Form LP-Form--inline"> </div>
<fieldset class="LP-Form__Fieldset"> </li>
<legend class="LP-Form__Legend">Basic data</legend> </ul>
<div class="LP-Form__Composition LP-Form__Composition--buttons">
<div class="LP-Form__Field LP-Form__Button LP-Input">
<input type="submit" class="LP-Button" value="Submit" />
</div>
<div class="LP-Form__Field LP-Form__Field--narrower">
<div class="LP-Input">
<label for="input123" class="LP-Input__Label">Link URL</label>
<input type="text" id="input123" class="LP-Input__Field" />
</div>
</div>
</div>
</fieldset>
</form>
</span>
</div>
</li>
</ul>
</div> </div>

5
components/rcss.bundled.scss
View File

@@ -43,7 +43,7 @@ $-spacing-large: 35px;
@mixin RV-Alignment--verticalCenter { @mixin RV-Alignment--verticalCenter {
display: grid; display: grid;
align-content: center; align-items: center;
} }
@mixin RV-Alignment--center { @mixin RV-Alignment--center {
@@ -106,7 +106,7 @@ $-spacing-large: 35px;
@mixin RV-FlexRow__Container { @mixin RV-FlexRow__Container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; height: 100%;
&--multiRow { &--multiRow {
@include RV-FlexRow__Container--multiRow; @include RV-FlexRow__Container--multiRow;
@@ -523,6 +523,7 @@ $-spacing-large: 35px;
position: relative; position: relative;
top: .125em; top: .125em;
} }
&__Container--medium &__Icon{ &__Container--medium &__Icon{
width: 2em; width: 2em;
height: 2em; height: 2em;

119
public/main.css
View File

@@ -20,17 +20,17 @@
justify-content: center; } justify-content: center; }
.RV-Alignment__Container--verticalCenter { .RV-Alignment__Container--verticalCenter {
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-Alignment__Container--center { .RV-Alignment__Container--center {
display: grid; display: grid;
justify-content: center; justify-content: center;
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-FlexRow__Container { .RV-FlexRow__Container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; } height: 100%; }
.RV-FlexRow__Container--multiRow { .RV-FlexRow__Container--multiRow {
flex-wrap: wrap; } flex-wrap: wrap; }
.RV-FlexRow__Container--column { .RV-FlexRow__Container--column {
@@ -59,12 +59,12 @@
justify-content: center; } justify-content: center; }
.RV-FlexRow__Item__Container--verticalCenter { .RV-FlexRow__Item__Container--verticalCenter {
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-FlexRow__Item__Container--center { .RV-FlexRow__Item__Container--center {
display: grid; display: grid;
justify-content: center; justify-content: center;
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-FlexRow__Item, .RV-FlexRow__Item--normal { .RV-FlexRow__Item, .RV-FlexRow__Item--normal {
flex-grow: 3; flex-grow: 3;
flex-shrink: 3; } flex-shrink: 3; }
@@ -111,12 +111,12 @@
justify-content: center; } justify-content: center; }
.RV-FlexGrid__Item__Container--verticalCenter { .RV-FlexGrid__Item__Container--verticalCenter {
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-FlexGrid__Item__Container--center { .RV-FlexGrid__Item__Container--center {
display: grid; display: grid;
justify-content: center; justify-content: center;
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-ContentCrop__Container, .RV-ContentCrop__Container * { .RV-ContentCrop__Container, .RV-ContentCrop__Container * {
overflow: hidden; overflow: hidden;
@@ -380,12 +380,12 @@
justify-content: center; } justify-content: center; }
.RV-ImageGrid__Item__Container--verticalCenter { .RV-ImageGrid__Item__Container--verticalCenter {
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-ImageGrid__Item__Container--center { .RV-ImageGrid__Item__Container--center {
display: grid; display: grid;
justify-content: center; justify-content: center;
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-ImageGrid__Container { .RV-ImageGrid__Container {
padding: 25px; } padding: 25px; }
@@ -1009,7 +1009,8 @@ body {
margin-top: 50px; } margin-top: 50px; }
.LP-LinkList { .LP-LinkList {
padding: 10px; } padding: 10px;
align-items: center; }
.LP-LinkList__Container { .LP-LinkList__Container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -1034,12 +1035,12 @@ body {
justify-content: center; } justify-content: center; }
.LP-LinkList__Item__Container--verticalCenter { .LP-LinkList__Item__Container--verticalCenter {
display: grid; display: grid;
align-content: center; } align-items: center; }
.LP-LinkList__Item__Container--center { .LP-LinkList__Item__Container--center {
display: grid; display: grid;
justify-content: center; justify-content: center;
display: grid; display: grid;
align-content: center; } align-items: center; }
.LP-LinkList__Container { .LP-LinkList__Container {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@@ -1062,22 +1063,85 @@ body {
.LP-LinkList .LP-LinkList__Item { .LP-LinkList .LP-LinkList__Item {
border-left: 1px solid #C09F80; border-left: 1px solid #C09F80;
width: calc(100% - 1px); width: calc(100% - 1px);
overflow: hidden; } overflow: hidden;
display: grid;
align-items: center;
display: flex;
flex-direction: row;
height: 100%; }
.LP-LinkList .LP-LinkList__Item--multiRow {
flex-wrap: wrap; }
.LP-LinkList .LP-LinkList__Item--column {
display: flex;
flex-direction: column; }
.LP-LinkList .LP-LinkList__Item .LP-LinkList__ItemHover {
opacity: 0.5;
display: grid;
justify-content: end;
flex-grow: 0;
flex-shrink: 0;
width: min-content;
flex-basis: min-content; }
.LP-LinkList .LP-LinkList__Item:hover { .LP-LinkList .LP-LinkList__Item:hover {
background-color: #f9f9f9; } background-color: #f9f9f9; }
.LP-LinkList .LP-LinkList__Item:hover .LP-LinkList__ItemHover {
opacity: 1; }
.LP-LinkList .LP-Link { .LP-LinkList .LP-Link {
height: 100%; min-width: min-content;
display: grid; width: 100%;
align-content: center; } padding: 10px; }
.LP-LinkList .LP-Link > * { .LP-LinkList .LP-Link__Container {
padding: 10px; } display: grid; }
.LP-LinkList .LP-Link > *__Container { .LP-LinkList .LP-Link__Container--top {
gap: 10px; } display: grid;
align-content: start; }
.LP-LinkList .LP-Link__Container--bottom {
display: grid;
align-content: end; }
.LP-LinkList .LP-Link__Container--left {
display: grid;
justify-content: start; }
.LP-LinkList .LP-Link__Container--right {
display: grid;
justify-content: end; }
.LP-LinkList .LP-Link__Container--horizontalCenter {
display: grid;
justify-content: center; }
.LP-LinkList .LP-Link__Container--verticalCenter {
display: grid;
align-items: center; }
.LP-LinkList .LP-Link__Container--center {
display: grid;
justify-content: center;
display: grid;
align-items: center; }
.LP-LinkList .LP-Link, .LP-LinkList .LP-Link--normal {
flex-grow: 3;
flex-shrink: 3; }
.LP-LinkList .LP-Link--narrower {
flex-grow: 1;
flex-shrink: 5; }
.LP-LinkList .LP-Link--narrow {
flex-grow: 2;
flex-shrink: 4; }
.LP-LinkList .LP-Link--wide {
flex-grow: 4;
flex-shrink: 2; }
.LP-LinkList .LP-Link--wider {
flex-grow: 5;
flex-shrink: 1; }
.LP-LinkList .LP-Link--fixedSize {
flex-grow: 0;
flex-shrink: 0;
width: min-content;
flex-basis: 100px; }
.LP-LinkList .LP-Link__Container {
gap: 10px; }
.LP-LinkList .LP-LinkAdd { .LP-LinkList .LP-LinkAdd {
height: 0; } height: 0; }
.LP-LinkList .LP-LinkAdd__Container { .LP-LinkList .LP-LinkAdd__Container {
position: relative; position: relative;
top: -15px; } top: -39px; }
.LP-LinkList .LP-LinkAdd__Container .LP-Form__Fieldset { .LP-LinkList .LP-LinkAdd__Container .LP-Form__Fieldset {
min-width: unset; } min-width: unset; }
.LP-LinkList .LP-LinkAdd__Container .LP-Form { .LP-LinkList .LP-LinkAdd__Container .LP-Form {
@@ -1091,7 +1155,8 @@ body {
display: none; } display: none; }
.LP-LinkAdd__TriggerLabel { .LP-LinkAdd__TriggerLabel {
cursor: pointer; } cursor: pointer;
display: contents; }
.LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel { .LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel {
display: none; } display: none; }
@@ -1168,7 +1233,7 @@ body {
.LP-Form .LP-Form__Composition { .LP-Form .LP-Form__Composition {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; height: 100%;
padding: 10px; } padding: 10px; }
.LP-Form .LP-Form__Composition--multiRow { .LP-Form .LP-Form__Composition--multiRow {
flex-wrap: wrap; } flex-wrap: wrap; }
@@ -1208,12 +1273,12 @@ body {
justify-content: center; } justify-content: center; }
.LP-Form .LP-Form__Field__Container--verticalCenter { .LP-Form .LP-Form__Field__Container--verticalCenter {
display: grid; display: grid;
align-content: center; } align-items: center; }
.LP-Form .LP-Form__Field__Container--center { .LP-Form .LP-Form__Field__Container--center {
display: grid; display: grid;
justify-content: center; justify-content: center;
display: grid; display: grid;
align-content: center; } align-items: center; }
.LP-Form .LP-Form__Field, .LP-Form .LP-Form__Field--normal { .LP-Form .LP-Form__Field, .LP-Form .LP-Form__Field--normal {
flex-grow: 3; flex-grow: 3;
flex-shrink: 3; } flex-shrink: 3; }
@@ -1265,12 +1330,12 @@ body {
justify-content: center; } justify-content: center; }
.LP-ImageGrid__Item__Container--verticalCenter { .LP-ImageGrid__Item__Container--verticalCenter {
display: grid; display: grid;
align-content: center; } align-items: center; }
.LP-ImageGrid__Item__Container--center { .LP-ImageGrid__Item__Container--center {
display: grid; display: grid;
justify-content: center; justify-content: center;
display: grid; display: grid;
align-content: center; } align-items: center; }
.LP-ImageGrid__Container { .LP-ImageGrid__Container {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;