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

Form fine tuning and link list add

Browse Source
This commit is contained in:
reverend
2020-08-21 12:08:51 +02:00
parent 8fa8033be4
commit 313968fafd
7 changed files with 160 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,15 +12,24 @@
position: relative;
&--add{
input[type=checkbox]:checked ~ .LP-LinkList__Add{
display: block;
.LP-LinkList__AddTrigger{
display: none;
&:checked{
& ~ .LP-LinkList__AddPlaceHolder{
visibility: hidden;
}
& ~ .LP-LinkList__Add{
display: block;
}
}
}
.LP-LinkList__Add{
position: absolute;
top: 7px;
display: none;
top: 3px;
display: none;
width: 100%;
.LP-Form__Fieldset{
min-width:unset;
}

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

@@ -7,34 +7,37 @@
<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 LP-LinkList__Item--add">
<input type="checkbox" id="wurstwurst" style="display: none"/>
<label for="wurstwurst">
<span class="LP-Link LP-Link--iconized">
<div class="LP-Link__IconWrapper">
<svg class="LP-Link__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>
</div>
<span class="LP-Text">Link hinzufügen</span>
</span>
<input type="checkbox" id="wurstwurst" class="LP-LinkList__AddTrigger"/>
<label for="wurstwurst" class="LP-LinkList__AddPlaceHolder">
<span class="LP-Link LP-Link--iconized">
<div class="LP-Link__IconWrapper">
<svg class="LP-Link__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>
</div>
<span class="LP-Text">Link hinzufügen</span>
</span>
</label>
<span class="LP-LinkList__Add">
<form class="LP-Form">
<fieldset class="LP-Form__Fieldset">
<div class="LP-Input">
<button class="LP-Button">Add</button>
</div>
<div class="LP-Input">
<input class="LP-Input__Field" type="url"/>
</div>
</fieldset>
</form>
</span>
<span class="LP-LinkList__Add">
<form class="LP-Form LP-Form--inline">
<fieldset class="LP-Form__Fieldset">
<div class="LP-Form__Composition LP-Form__Composition">
<div class="LP-Form__Field LP-Form__Field--static LP-Input">
<button class="LP-Button">Add</button>
</div>
<div class="LP-Form__Field LP-Form__Field--wide LP-Input">
<input class="LP-Input__Field" type="url"/>
</div>
</div>
</div>
</fieldset>
</form>
</span>
</li>
</ul>
</div>