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

Compare commits

base: Commander1024:313968fafd7c2aa08b9362bef7f02211ffacd134
Branches Tags
Commander1024:master
Commander1024:linklist-add
..
compare: Commander1024:b64724b5869dd51dfb43d040e901ec82f4da2c3d
Branches Tags
Commander1024:master
Commander1024:linklist-add

No commits in common. "313968fafd7c2aa08b9362bef7f02211ffacd134" and "b64724b5869dd51dfb43d040e901ec82f4da2c3d" have entirely different histories.
313968fafd ... b64724b586

7 changed files with 92 additions and 189 deletions
Show Stats Expand all files Collapse all files

2
components/01_Atoms/input/_input.scss
View File

@ -8,7 +8,7 @@
.LP-Input__Field{ .LP-Input__Field{
border: none; border: none;
border-bottom: 1px solid $-grey; border-bottom: 1px solid $-grey;
padding: 8px 0; padding: 8px;
margin-bottom: $-margin-bottom; margin-bottom: $-margin-bottom;
&:focus, &:active, &:invalid{ &:focus, &:active, &:invalid{

2
components/01_Atoms/input/input.hbs
View File

@ -1,6 +1,6 @@
<div class="LP-Input LP-Input{{modifier}}"> <div class="LP-Input LP-Input{{modifier}}">
<label for="input123" class="LP-Input__Label">{{label}}</label> <label for="input123" class="LP-Input__Label">{{label}}</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"> <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"
{{#if disabled}} {{#if disabled}}
disabled="disabled" disabled="disabled"
{{/if}} {{/if}}

102
components/03_Organisms/form/_form.scss
View File

@ -1,20 +1,11 @@
.LP-Form{ .LP-Form{
display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
&--inline{
padding: 0 10px;
.LP-Form__Fieldset{
.LP-Form__Composition{
gap: 10px;
}
}
}
.LP-Form__Fieldset{ .LP-Form__Fieldset{
border: none; border: none;
padding: 0;
margin: 0;
max-width: 1200px; max-width: 1200px;
min-width: $-viewport-medium; min-width: $-viewport-medium;
@ -25,64 +16,55 @@
font-size: 21px; font-size: 21px;
} }
}
.LP-Form__Composition{ .LP-Form__Composition{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
gap: 30px;
&--buttons{ .LP-Form__Field{
gap: 10px; flex: 3 2 100px;
} padding: 6px 15px;
.LP-Form__Field{ &--wider{
flex: 3 2 100px; flex: 5 2;
padding: 6px 0; }
&--wider{ &--wide{
flex: 5 2; flex: 4 2;
} }
&--wide{ &--narrow{
flex: 4 2; flex: 2 1;
} }
&--narrow{ &--narrower{
flex: 2 1; flex: 1 2;
} }
}
&--narrower{ &--buttons{
flex: 1 2; justify-content: flex-end;
} }
&--static{ .LP-Form__Button{
flex: 0 0; flex-grow: 0;
} padding-left: 0;
} min-width: 130px;
&--buttons{ .LP-Link{
justify-content: flex-end; display:contents;
} }
}
.LP-Form__Button{ .LP-Form__InfoText{
flex-grow: 0; .LP-Paragraph{
padding-left: 0; font-family: $-primary-sans-serif-font;
min-width: 130px; color: $-grey;
}
.LP-Link{ }
display:contents; }
} }
}
.LP-Form__InfoText{
.LP-Paragraph{
font-family: $-primary-sans-serif-font;
color: $-grey;
}
}
}
} }
@media(max-width: $-viewport-medium){ @media(max-width: $-viewport-medium){
@ -106,7 +88,7 @@
} }
@media(max-width: $-viewport-extra-small){ @media(max-width: $-viewport-extra-small){
.LP-Form :not(.LP-Form--inline){ .LP-Form{
.LP-Form__Fieldset{ .LP-Form__Fieldset{
.LP-Form__Composition{ .LP-Form__Composition{
display: flex; display: flex;

2
components/03_Organisms/form/form.hbs
View File

@ -50,7 +50,7 @@
</div> </div>
<div class="LP-Form__Field LP-Form__Field--wide LP-Input"> <div class="LP-Form__Field LP-Form__Field--wide LP-Input">
<label for="input123" class="LP-Input__Label">Town</label> <label for="input123" class="LP-Input__Label">Town</label>
<input type="text" id="input123" class="LP-Input__Field"/> <input type="text" id="input123" class="LP-Input__Field"/>
</div> </div>
</div> </div>

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

@ -9,37 +9,6 @@
border-left: 1px solid $-light-brown; border-left: 1px solid $-light-brown;
width: calc(100% - 1px); width: calc(100% - 1px);
margin-top: 12px; margin-top: 12px;
position: relative;
&--add{
.LP-LinkList__AddTrigger{
display: none;
&:checked{
& ~ .LP-LinkList__AddPlaceHolder{
visibility: hidden;
}
& ~ .LP-LinkList__Add{
display: block;
}
}
}
.LP-LinkList__Add{
position: absolute;
top: 3px;
display: none;
width: 100%;
.LP-Form__Fieldset{
min-width:unset;
}
.LP-Form{
display: block;
min-width: 0px;
}
}
}
.LP-Link{ .LP-Link{
$-link-padding: 1em; $-link-padding: 1em;

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

@ -6,38 +6,17 @@
<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"><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 LP-LinkList__Item--add"> <li class="LP-LinkList__Item"><a href="#" class="LP-Link LP-Link--iconized">
<input type="checkbox" id="wurstwurst" class="LP-LinkList__AddTrigger"/> <div class="LP-Link__IconWrapper">
<label for="wurstwurst" class="LP-LinkList__AddPlaceHolder"> <svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
<span class="LP-Link LP-Link--iconized"> xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
<div class="LP-Link__IconWrapper"> xml:space="preserve">
<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" <g>
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" <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
xml:space="preserve"> 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>
<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 </svg>
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>
</g> <span class="LP-Text">Link hinzufügen</span></a></li>
</svg>
</div>
<span class="LP-Text">Link hinzufügen</span>
</span>
</label>
<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> </ul>
</div> </div>

93
public/main.css
View File

@ -178,7 +178,7 @@ body {
.LP-Input .LP-Input__Field { .LP-Input .LP-Input__Field {
border: none; border: none;
border-bottom: 1px solid #565656; border-bottom: 1px solid #565656;
padding: 8px 0; padding: 8px;
margin-bottom: 30px; } margin-bottom: 30px; }
.LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid { .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
margin-bottom: 29px; margin-bottom: 29px;
@ -592,24 +592,7 @@ body {
.LP-LinkList__List .LP-LinkList__Item { .LP-LinkList__List .LP-LinkList__Item {
border-left: 1px solid #C09F80; border-left: 1px solid #C09F80;
width: calc(100% - 1px); width: calc(100% - 1px);
margin-top: 12px; margin-top: 12px; }
position: relative; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger {
display: none; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__AddPlaceHolder {
visibility: hidden; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__Add {
display: block; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add {
position: absolute;
top: 3px;
display: none;
width: 100%; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form__Fieldset {
min-width: unset; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form {
display: block;
min-width: 0px; }
.LP-LinkList__List .LP-LinkList__Item .LP-Link { .LP-LinkList__List .LP-LinkList__Item .LP-Link {
padding: 1em 0 1em 1em; padding: 1em 0 1em 1em;
width: calc(100% - 1em); width: calc(100% - 1em);
@ -661,16 +644,11 @@ body {
background-color: inherit; } background-color: inherit; }
.LP-Form { .LP-Form {
display: flex;
flex-direction: column; flex-direction: column;
align-items: center; } align-items: center; }
.LP-Form--inline {
padding: 0 10px; }
.LP-Form--inline .LP-Form__Fieldset .LP-Form__Composition {
gap: 10px; }
.LP-Form .LP-Form__Fieldset { .LP-Form .LP-Form__Fieldset {
border: none; border: none;
padding: 0;
margin: 0;
max-width: 1200px; max-width: 1200px;
min-width: 750px; } min-width: 750px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Legend { .LP-Form .LP-Form__Fieldset .LP-Form__Legend {
@ -678,37 +656,32 @@ body {
padding: 0; padding: 0;
font-family: Montserrat, Helvetica, sans-serif; font-family: Montserrat, Helvetica, sans-serif;
font-size: 21px; } font-size: 21px; }
.LP-Form .LP-Form__Composition { .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between; }
gap: 30px; } .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
.LP-Form .LP-Form__Composition--buttons { flex: 3 2 100px;
gap: 10px; } padding: 6px 15px; }
.LP-Form .LP-Form__Composition .LP-Form__Field { .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
flex: 3 2 100px; flex: 5 2; }
padding: 6px 0; } .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
.LP-Form .LP-Form__Composition .LP-Form__Field--wider { flex: 4 2; }
flex: 5 2; } .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
.LP-Form .LP-Form__Composition .LP-Form__Field--wide { flex: 2 1; }
flex: 4 2; } .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
.LP-Form .LP-Form__Composition .LP-Form__Field--narrow { flex: 1 2; }
flex: 2 1; } .LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons {
.LP-Form .LP-Form__Composition .LP-Form__Field--narrower { justify-content: flex-end; }
flex: 1 2; } .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
.LP-Form .LP-Form__Composition .LP-Form__Field--static { flex-grow: 0;
flex: 0 0; } padding-left: 0;
.LP-Form .LP-Form__Composition--buttons { min-width: 130px; }
justify-content: flex-end; } .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button .LP-Link {
.LP-Form .LP-Form__Composition .LP-Form__Button { display: contents; }
flex-grow: 0; .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph {
padding-left: 0; font-family: Montserrat, Helvetica, sans-serif;
min-width: 130px; } color: #565656; }
.LP-Form .LP-Form__Composition .LP-Form__Button .LP-Link {
display: contents; }
.LP-Form .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph {
font-family: Montserrat, Helvetica, sans-serif;
color: #565656; }
@media (max-width: 750px) { @media (max-width: 750px) {
.LP-Form .LP-Form__Fieldset { .LP-Form .LP-Form__Fieldset {
@ -721,16 +694,16 @@ body {
justify-content: space-between; } } justify-content: space-between; } }
@media (max-width: 450px) { @media (max-width: 450px) {
.LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition { .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; } justify-content: space-between; }
.LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) { .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) {
flex: 3 1 100px; flex: 3 1 100px;
padding: 12px 15px; } padding: 12px 15px; }
.LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button { .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
padding: 0 15px; } padding: 0 15px; }
.LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition--buttons { .LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons {
justify-content: flex-end; } } justify-content: flex-end; } }
.LP-ImageGrid .LP-ImageGrid__List { .LP-ImageGrid .LP-ImageGrid__List {