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

Compare commits

base: Commander1024:40043422557326cc3c38d2f285ecaa35da8758ec
Branches Tags
Commander1024:master
Commander1024:linklist-add
...
compare: Commander1024:7865066adbb6e9de2629857209948496c7629756
Branches Tags
Commander1024:master
Commander1024:linklist-add

2 Commits
4004342255 ... 7865066adb

Author SHA1 Message Date
reverend
7865066adb New Icon 2020-08-26 16:48:53 +02:00
reverend
b39202d296 Linkadd form 2020-08-26 16:48:48 +02:00
4 changed files with 171 additions and 23 deletions
Show Stats Expand all files Collapse all files

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

@ -20,4 +20,44 @@
@include RV-Spacing__Inner--small; @include RV-Spacing__Inner--small;
} }
} }
.LP-LinkAdd{
height: 0;
}
.LP-LinkAdd__Container{
position: relative;
top: -15px;
.LP-Form__Fieldset{
min-width:unset;
}
.LP-Form{
display: block;
min-width: 0px;
}
}
}
.LP-LinkAdd{
display: none;
}
.LP-LinkAdd__Trigger {
display: none;
}
.LP-LinkAdd__TriggerLabel{
cursor: pointer;
}
.LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel{
display: none;
}
.LP-LinkAdd__Trigger:checked ~ .LP-LinkAdd{
display: block;
} }

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

@ -1,24 +1,63 @@
<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">
<a href="#" class="LP-Link"> <div class="RV-FlexRow__Container">
<a href="#" class="LP-Link RV-FlexRow__Item"><span class="LP-Text">OSM</span></a>
<div class="RV-Iconized__Container RV-Iconized__Container--medium"> <a href="#" class="LP-Link RV-FlexRow__Item RV-FlexRow__Item--fixedSize">
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" <div class="RV-Iconized__Container RV-Iconized__Container--small">
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" <svg class="RV-Iconized__Icon" version="1.1" id="Capa_1"
y="0px" viewBox="0 0 512 512" xml:space="preserve"> xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
<g> y="0px" viewBox="0 0 512 512" xml:space="preserve">
<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 <g>
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" /> <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
</g> 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" />
</svg> </g>
<span class="RV-Iconized__Text">Link hinzufügen</span> </svg>
</div> </div>
</a> </a>
</li> </div>
</ul> </li>
<li class="LP-LinkList__Item LP-LinkList__Item--add">
<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" />
</g>
</svg>
<span class="RV-Iconized__Text">Link hinzufügen</span>
</div>
</a>
</label>
<div class="LP-LinkAdd">
<span class="LP-LinkAdd__Container">
<form class="LP-Form LP-Form--inline">
<fieldset class="LP-Form__Fieldset">
<legend class="LP-Form__Legend">Basic data</legend>
<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>

44
public/icons/cancel.svg Normal file
View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg 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.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
<g>
<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>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

25
public/main.css
View File

@ -1073,6 +1073,31 @@ body {
padding: 10px; } padding: 10px; }
.LP-LinkList .LP-Link > *__Container { .LP-LinkList .LP-Link > *__Container {
gap: 10px; } gap: 10px; }
.LP-LinkList .LP-LinkAdd {
height: 0; }
.LP-LinkList .LP-LinkAdd__Container {
position: relative;
top: -15px; }
.LP-LinkList .LP-LinkAdd__Container .LP-Form__Fieldset {
min-width: unset; }
.LP-LinkList .LP-LinkAdd__Container .LP-Form {
display: block;
min-width: 0px; }
.LP-LinkAdd {
display: none; }
.LP-LinkAdd__Trigger {
display: none; }
.LP-LinkAdd__TriggerLabel {
cursor: pointer; }
.LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel {
display: none; }
.LP-LinkAdd__Trigger:checked ~ .LP-LinkAdd {
display: block; }
.LP-Footer { .LP-Footer {
margin-top: 75px; margin-top: 75px;