Neues Layout

This commit is contained in:
Akki 2016-01-14 23:52:18 +01:00
parent 5b6397ea1a
commit 30587e92e7
6 changed files with 45 additions and 52 deletions

View File

@ -18,7 +18,7 @@
</label>
</div>
<div style="padding-bottom:15px;">
<div class="item item-divider oswald">Wählen Sie Ihre Rosen aus</div>
<div class="item item-divider oleo">Wählen Sie Ihre Rosen aus</div>
<ion-list>
<ion-radio ng-model="$parent.preis" ng-value="'1xrose'" class="item item-thumbnail-left item-text-wrap"><img src="img/rose1.png"><h2 class="lobster">1 Rose </h2><p>Preis: 0,50 € (inkl. Mwst 0,59 €)</p></ion-radio>
<ion-radio ng-model="$parent.preis" ng-value="'3xrose'" class="item item-thumbnail-left item-text-wrap"><img src="img/rose3.png"><h2 class="lobster">3 Rosen</h2><p>Preis: 1,00 € (inkl. Mwst 1,19 €)</p></ion-radio>

View File

@ -3,6 +3,7 @@
font-family: 'Lobster', cursive;
}
.lobsterMiddle{
font-family: 'Lobster', cursive;
font-size: 1.2em;
@ -22,35 +23,45 @@
.item-divider{
background-image: linear-gradient(
hsla(340, 100%, 35%, 1) 20%,
hsl(340,100%,54%) 90%
hsla(0, 94%, 33%, 1) 20%,
hsl(0,94%,54%) 90%
);
color:white;
}
.tabs-addddssertive > .tabs{
background-image: linear-gradient(
hsla(340, 100%, 35%, 1) 20%,
hsl(340,100%,54%) 90%
hsla(0, 94%, 33%, 1) 20%,
hsl(0,94%,54%) 90%
) !important;
}
.tabs-assertive > .tabs{
background-color: #BD0340 !important;
.tabs-assertive > .tabs{
background-color: #A50505 !important;
}
.bar-custom{
background-image: linear-gradient(
hsla(340, 100%, 35%, 1) 20%,
hsl(340,100%,54%) 90%
hsla(0, 94%, 33%, 1) 20%,
hsl(0,94%,54%) 90%
) !important;
font-family: 'Bubblegum Sans', cursive;
}
.button-custom{
background-color: #C60545;
text-decoration: none;
border: 1px solid #C60545;
border-color: #F9135F #F9135F #F9135F #F9135F;
color: #fff
}
font-family: 'Bubblegum Sans', cursive;
background-color: #A50505;
text-decoration: none;
border: 1px solid #A50505;
color: #fff
}
.oleo{
font-family: 'Bubblegum Sans', cursive;
font-size: 1.3em !important;
}

View File

@ -8,6 +8,7 @@
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Bubblegum+Sans' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

View File

@ -1,4 +1,4 @@
@charset "UTF-8";
@charset "UTF-8";
/*!
* Copyright 2014 Drifty Co.
* http://drifty.com/

View File

@ -1,11 +1,11 @@
<ion-view view-title="Gekaufte Rosen">
<ion-content>
<ion-content class="padding">
<div style="padding-bottom:15px;">
<div class="item item-divider oswald">Hier können Sie Ihre gekauften Rosen ansehen oder nochmals versenden!</div>
<ul class="list card">
<div class="item item-divider oleo">Hier können Sie Ihre gekauften Rosen ansehen oder nochmals versenden!</div>
<ul class="list">
<a class="item item-thumbnail-left item-button-right" href="#" ng-repeat="i in items" ng-model="items">
<img src="img/rose1.png">
<h1>{{i.name}}</h1>
@ -21,10 +21,6 @@
</a>
</ul>
</div>

View File

@ -1,43 +1,28 @@
<ion-view view-title='Rosen kaufen'>
<ion-content class="padding">
<div class="list card">
<div class="item item-divider oswald">Wolle Rose kaufen?</div>
<div class="item item-body lobster">
<div style="padding-bottom:25px;">
Schenken Sie einem besonderen Menschen eine aussergewöhnliche Aufmerksamkeit.
</div>
<div class="item item-divider oswald">An wen wollen Sie die Rose verschenken</div>
<div class="list list-inset" style="padding-bottom:15px;">
<div class="item item-divider oleo">Schenken Sie einem besonderen Menschen eine außergewöhnliche Aufmerksamkeit!</div>
<label class="item item-input item-stacked-label">
<span class="input-label">Name Ihres Liebsten:</span>
<input type="text" placeholder="" class="lobster" ng-model="$parent.name">
<input type="text" placeholder="" class="oleo" ng-model="$parent.name">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Ihre persönliche Nachricht:</span>
<textarea placeholder="" rows="4" cols="10" class="lobster" ng-model="$parent.freitext"></textarea>
<textarea placeholder="" rows="4" cols="10" class="oleo" ng-model="$parent.freitext"></textarea>
</label>
</div>
<div style="padding-bottom:15px;">
<div class="item item-divider oswald">Wählen Sie Ihre Rosen aus</div>
<div class="item item-divider oleo">Wählen Sie Ihre Rosen aus:</div>
<ion-list>
<ion-radio ng-model="$parent.preis" ng-value="'1xrose'" class="item item-thumbnail-left item-text-wrap"><img src="img/rose1.png"><h2 class="lobster">1 Rose </h2><p>Preis: 0,50 € (inkl. Mwst 0,59 €)</p></ion-radio>
<ion-radio ng-model="$parent.preis" ng-value="'3xrose'" class="item item-thumbnail-left item-text-wrap"><img src="img/rose3.png"><h2 class="lobster">3 Rosen</h2><p>Preis: 1,00 € (inkl. Mwst 1,19 €)</p></ion-radio>
<ion-radio ng-model="$parent.preis" ng-value="'9xrose'" class="item item-thumbnail-left item-text-wrap"><img src="img/rose10.png"><h2 class="lobster">9 Rosen</h2><p>Preis: 2,00 € (inkl. Mwst 2,38 €)</p></ion-radio>
<ion-radio ng-model="$parent.preis" ng-value="'1xrose'" class="item item-thumbnail-left item-text-wrap"><img src="img/rose1.png"><h2 class="oleo">1 Rose </h2><p>Preis: 0,50 € (zzgl. gesetzl. MwSt.)</p></ion-radio>
<ion-radio ng-model="$parent.preis" ng-value="'3xrose'" class="item item-thumbnail-left item-text-wrap"><img src="img/rose3.png"><h2 class="oleo">3 Rosen</h2><p>Preis: 1,00 € (zzgl. gesetzl. MwSt.)</p></ion-radio>
<ion-radio ng-model="$parent.preis" ng-value="'9xrose'" class="item item-thumbnail-left item-text-wrap"><img src="img/rose10.png"><h2 class="oleo">9 Rosen</h2><p>Preis: 2,00 € (zzgl. gesetzl. MwSt.)</p></ion-radio>
</ion-list>
<label class="item item-input item-select">
<div class="input-label">
Farbe
</div>
<select>
<option selected>Rot</option>
<option>Gelb</option>
<option>Weiß</option>
</select>
</label>
</div>
<div class="item item-divider oswald">Rosen kaufen?</div>
</div>
<div class="list card">
<div class="item item-divider oleo">Rosen jetzt kaufen?</div>
<div class="row">
<div class="col col-50"><button class="button button-full button-small icon-left ion-image button-custom" ng-disabled="!$parent.preis || !$parent.name || !$parent.freitext" ng-click="validate()">Vorschau</button></div>
<div class="col col-50"><button class="button button-full button-small icon-left ion-social-euro button-custom" ng-disabled="!$parent.preis || !$parent.freitext || !$parent.name" ng-click="buyRose()">Jetzt Kaufen</button></div>
@ -47,7 +32,7 @@
<div class="col col-50"><button class="button button-full button-small icon-left ion-image button-custom" ng-disabled="!$parent.preis || !$parent.name || !$parent.freitext" ng-click="loaddata()">Laden</button></div>
<div class="col col-50"><button class="button button-full button-small icon-left ion-social-euro button-custom" ng-disabled="!$parent.preis || !$parent.freitext || !$parent.name" ng-click="savedata()">Speichern</button></div>
</div>
</div>
</div>
</div>