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

Compare commits

base: Commander1024:fba48603b67097d997e5ce4d4de8330a4ea1d399
Branches Tags
Commander1024:master
Commander1024:linklist-add
..
compare: Commander1024:a55b02825e46ea5d31c9dcd7bc24d8b562521a6e
Branches Tags
Commander1024:master
Commander1024:linklist-add

9 Commits
fba48603b6 ... a55b02825e

Author SHA1 Message Date
reverend
a55b02825e Color adjustment 2020-08-12 22:31:48 +02:00
reverend
7ceddb736f Pagnation in place list 2020-08-12 22:30:14 +02:00
reverend
2243c7ed9e Centered Pagination 2020-08-12 22:29:18 +02:00
reverend
1507a0b01e Small tweak 2020-08-12 22:27:31 +02:00
reverend
c8c21869c4 Pagnination Component 2020-08-12 22:27:18 +02:00
reverend
09a6377901 Some Tweaks 2020-08-12 21:31:13 +02:00
reverend
f0b3839e73 MessageList Component 2020-08-12 21:31:04 +02:00
reverend
72c8febfc4 CSS for Messages 2020-08-12 20:11:22 +02:00
reverend
4120155a1c New Icons 2020-08-12 20:11:12 +02:00
18 changed files with 339 additions and 2 deletions
Show Stats Expand all files Collapse all files

2
components/01_Atoms/_atoms.scss
View File

@ -8,3 +8,5 @@
@import 'image/image'; @import 'image/image';
@import 'logo/logo'; @import 'logo/logo';
@import 'tag/tag'; @import 'tag/tag';
@import 'message/message';
@import 'pagination/pagination';

69
components/01_Atoms/message/_message.scss Normal file
View File

@ -0,0 +1,69 @@
.LP-Message{
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
background-color: $-almost-white;
font-family: $-primary-sans-serif-font;
border-radius: 3px;
font-weight: bold;
box-shadow: 0 0 2px $-grey;
overflow: hidden;
&--error{
.LP-Message__Icon{
background-color: invert(#fd6861);
background-image: url('/icons/error.png');
}
}
&--warning{
.LP-Message__Icon{
background-color:invert(#ffb818);
background-image: url('/icons/error.png');
}
}
&--info{
.LP-Message__Icon{
background-color: invert(lightblue);
background-image: url('/icons/information.svg');
}
}
&--success{
.LP-Message__Icon{
background-color: invert(#96c800);
background-image: url('/icons/success.svg');
}
}
&--debug{
.LP-Message__Icon{
background-color: invert(#fb95d0);
background-image: url('/icons/debug.png');
}
}
.LP-Message__Icon{
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: center;
height: 100%;
min-height: 50px;
width: 50px;
filter: invert(1);
flex-shrink: 0;
flex-grow: 0;
}
.LP-Message__Text{
padding: 0 15px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px;
}
}

39
components/01_Atoms/message/message.config.json Normal file
View File

@ -0,0 +1,39 @@
{
"title": "Message",
"context": {
"messageText": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
"modifier": "--info"
},
"variants": [
{
"name": "Information",
"context": {
"modifier": "--info"
}
},
{
"name": "Warning",
"context": {
"modifier": "--warning"
}
},
{
"name": "Error",
"context": {
"modifier": "--error"
}
},
{
"name": "Success",
"context": {
"modifier": "--success"
}
},
{
"name": "Debug",
"context": {
"modifier": "--debug"
}
}
]
}

10
components/01_Atoms/message/message.hbs Normal file
View File

@ -0,0 +1,10 @@
<div class="LP-Message {{#if modifier}}LP-Message{{modifier}}{{/if}}">
<div>
<div class="LP-Message__Icon">
</div>
</div>
<div class="LP-Message__Text">
{{messageText}}
</div>
</div>

54
components/01_Atoms/pagination/_pagination.scss Normal file
View File

@ -0,0 +1,54 @@
.LP-Pagination{
font-family: $-primary-sans-serif-font;
font-weight: bold;
display: flex;
flex-direction: row;
justify-content: center;
.LP-Pagination__List{
list-style-type: none;
display: flex;
flex-direction: row;
}
.LP-Pagination__Item{
margin: 0 4px;
&--current{
.LP-Link{
background-color: $-beige;
border-radius: 2px;
&:hover{
background-color: $-beige;
color: $-grey;
}
}
}
}
.LP-Link{
padding: 15px 25px;
&:active, &:hover{
background-color: $-beige;
border-radius: 2px;
color: $-grey;
}
}
.LP-Pagination__Previous{
&:before{
content: "«";
}
}
.LP-Pagination__Next{
&:before{
content: "»";
}
}
}

3
components/01_Atoms/pagination/pagination.config.json Normal file
View File

@ -0,0 +1,3 @@
{
"title": "Pagnination"
}

37
components/01_Atoms/pagination/pagination.hbs Normal file
View File

@ -0,0 +1,37 @@
<div class="LP-Pagination">
<ul class="LP-Pagination__List">
<li class="LP-Pagination__Item LP-Pagination__Item--previous">
<a href="#" class="LP-Link"><span class="LP-Pagination__Previous"></span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">1</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">2</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--number">
<a class="LP-Link" href="#"><span class="LP-Pagination__Number">3</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">4</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--number LP-Pagination__Item--current">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">5</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">6</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">7</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">8</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--number">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">9</span></a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--next">
<a href="#" class="LP-Link"><span class="LP-Pagination__Next"></span></a>
</li>
</ul>
</div>

1
components/02_Molecules/_molecules.scss
View File

@ -2,3 +2,4 @@
@import 'placeTeaser/placeTeaser'; @import 'placeTeaser/placeTeaser';
@import 'tagList/tagList'; @import 'tagList/tagList';
@import 'navigation/navigation'; @import 'navigation/navigation';
@import 'messageList/messageList';

15
components/02_Molecules/messageList/_messageList.scss Normal file
View File

@ -0,0 +1,15 @@
.LP-MessageList{
padding: 25px;
.LP-MessageList__List{
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.LP-MessageList__Item{
margin: 5px 0;
}
}

6
components/02_Molecules/messageList/messageList.config.json Normal file
View File

@ -0,0 +1,6 @@
{
"title": "Message List",
"context": {
"text": "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
}
}

9
components/02_Molecules/messageList/messageList.hbs Normal file
View File

@ -0,0 +1,9 @@
<div class="LP-MessageList">
<ul class="LP-MessageList__List">
<li class="LP-MessageList__Item">{{> @message messageText=text modifier='--info'}}</li>
<li class="LP-MessageList__Item">{{> @message messageText=text modifier='--warning'}}</li>
<li class="LP-MessageList__Item">{{> @message messageText=text modifier='--error'}}</li>
<li class="LP-MessageList__Item">{{> @message messageText=text modifier='--success'}}</li>
<li class="LP-MessageList__Item">{{> @message messageText=text modifier='--debug'}}</li>
</ul>
</div>

1
components/03_Organisms/placeList/placeList.hbs
View File

@ -9,4 +9,5 @@
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
{{> @pagination}}
</div> </div>

BIN
public/icons/debug.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/icons/error.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

1
public/icons/information.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690705 12.309295 48 25 48 C 37.690705 48 48 37.690705 48 25 C 48 12.309295 37.690705 2 25 2 z M 25 4 C 36.609824 4 46 13.390176 46 25 C 46 36.609824 36.609824 46 25 46 C 13.390176 46 4 36.609824 4 25 C 4 13.390176 13.390176 4 25 4 z M 25 11 A 3 3 0 0 0 22 14 A 3 3 0 0 0 25 17 A 3 3 0 0 0 28 14 A 3 3 0 0 0 25 11 z M 21 21 L 21 23 L 22 23 L 23 23 L 23 36 L 22 36 L 21 36 L 21 38 L 22 38 L 23 38 L 27 38 L 28 38 L 29 38 L 29 36 L 28 36 L 27 36 L 27 21 L 26 21 L 22 21 L 21 21 z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 641 B

1
public/icons/message.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>Wondicon - UI (Free)</title><path class="cls-1" d="M125,177.86a5,5,0,0,1-4.74-3.42L96,101.76,27.64,77.57a5,5,0,0,1,.2-9.49L169.22,24.53a5,5,0,0,1,6.23,6.3L129.76,174.37a5,5,0,0,1-4.73,3.49ZM45.23,73.19l56.44,20a5,5,0,0,1,3.07,3.13l20.15,60.44L163,36.9Z"/><path class="cls-1" d="M100,102.84a4.94,4.94,0,0,1-3.59-1.52,5,5,0,0,1,.11-7.07L131.86,60a5,5,0,0,1,7,7.18l-35.35,34.26A5,5,0,0,1,100,102.84Z"/><path class="cls-1" d="M75,175.69a5,5,0,0,1-3.19-8.85l25-20.69a5,5,0,0,1,6.38,7.7l-25,20.69A5,5,0,0,1,75,175.69Z"/><path class="cls-1" d="M29.31,175.69a5,5,0,0,1-3.53-8.54l45.68-45.69a5,5,0,0,1,7.08,7.08L32.85,174.22A5,5,0,0,1,29.31,175.69Z"/><path class="cls-1" d="M29.31,130a5,5,0,0,1-3.85-8.19l20.69-25a5,5,0,0,1,7.7,6.38l-20.69,25A5,5,0,0,1,29.31,130Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 914 B

3
public/icons/success.svg Normal file
View File

@ -0,0 +1,3 @@
<?xml version="1.0" ?><svg style="enable-background:new 0 0 24 24;" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{display:none;}
</style><g class="st0" id="grid"/><g id="icon"><path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M12,23C5.935,23,1,18.065,1,12S5.935,1,12,1 s11,4.935,11,11S18.065,23,12,23z"/><path d="M16.801,8.403l-6.132,6.133L7.753,11.62c-0.195-0.195-0.512-0.195-0.707,0s-0.195,0.512,0,0.707l3.27,3.27 c0.094,0.094,0.221,0.146,0.354,0.146s0.26-0.053,0.354-0.146l6.485-6.486c0.195-0.195,0.195-0.512,0-0.707 S16.997,8.208,16.801,8.403z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 714 B

86
public/main.css
View File

@ -1,3 +1,4 @@
@charset "UTF-8";
@font-face { @font-face {
font-family: Crimson; font-family: Crimson;
src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); } src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
@ -205,6 +206,79 @@ body {
font-size: 1em; font-size: 1em;
display: inline; } display: inline; }
.LP-Message {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
background-color: #f9f9f9;
font-family: Montserrat, Helvetica, sans-serif;
border-radius: 3px;
font-weight: bold;
box-shadow: 0 0 2px #565656;
overflow: hidden; }
.LP-Message--error .LP-Message__Icon {
background-color: #02979e;
background-image: url("/icons/error.png"); }
.LP-Message--warning .LP-Message__Icon {
background-color: #0047e7;
background-image: url("/icons/error.png"); }
.LP-Message--info .LP-Message__Icon {
background-color: #522719;
background-image: url("/icons/information.svg"); }
.LP-Message--success .LP-Message__Icon {
background-color: #6937ff;
background-image: url("/icons/success.svg"); }
.LP-Message--debug .LP-Message__Icon {
background-color: #046a2f;
background-image: url("/icons/debug.png"); }
.LP-Message .LP-Message__Icon {
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: center;
height: 100%;
min-height: 50px;
width: 50px;
filter: invert(1);
flex-shrink: 0;
flex-grow: 0; }
.LP-Message .LP-Message__Text {
padding: 0 15px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px; }
.LP-Pagination {
font-family: Montserrat, Helvetica, sans-serif;
font-weight: bold;
display: flex;
flex-direction: row;
justify-content: center; }
.LP-Pagination .LP-Pagination__List {
list-style-type: none;
display: flex;
flex-direction: row; }
.LP-Pagination .LP-Pagination__Item {
margin: 0 4px; }
.LP-Pagination .LP-Pagination__Item--current .LP-Link {
background-color: #D7CEC7;
border-radius: 2px; }
.LP-Pagination .LP-Pagination__Item--current .LP-Link:hover {
background-color: #D7CEC7;
color: #565656; }
.LP-Pagination .LP-Link {
padding: 15px 25px; }
.LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
background-color: #D7CEC7;
border-radius: 2px;
color: #565656; }
.LP-Pagination .LP-Pagination__Previous:before {
content: "«"; }
.LP-Pagination .LP-Pagination__Next:before {
content: "»"; }
.LP-Content { .LP-Content {
padding: 35px; } padding: 35px; }
@ -349,6 +423,18 @@ body {
.LP-Menu .LP-Menu__List { .LP-Menu .LP-Menu__List {
justify-content: space-between; } } justify-content: space-between; } }
.LP-MessageList {
padding: 25px; }
.LP-MessageList .LP-MessageList__List {
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
flex-direction: column;
justify-content: space-between; }
.LP-MessageList .LP-MessageList__Item {
margin: 5px 0; }
.LP-Header { .LP-Header {
display: flex; display: flex;
align-items: center; align-items: center;