Skip to content

Commit 90732a1

Browse files
zeroualzeroual
committed
Improve recipe publisher design
1 parent 435eec8 commit 90732a1

File tree

8 files changed

+79
-62
lines changed

8 files changed

+79
-62
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"angular-ui-router": "^0.3.0",
1616
"moment": "^2.13.0",
1717
"angular-local-storage": "^0.2.7",
18-
"angular-bootstrap": "^1.3.3",
18+
"angular-bootstrap": "^2.4.0",
1919
"angular-translate": "^2.15.1",
2020
"ngToast": "ngtoast#^2.0.0",
2121
"ng-file-upload": "^12.0.4",

‎src/main/webapp/app/social/publisher/components/recipe-wizard/recipe-images/recipe-images.html

+18-15
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
<div class="container">
22

33
<div class="row">
4-
<div align="center">
5-
<label translate="publisher.recipe.images-tips"/>
6-
</div>
7-
<div class="recipe-images-uploader" align="center">
8-
<a href="" ngf-select ng-model="$ctrl.images" ngf-multiple="true" ngf-keep="true"
9-
ngf-pattern="'image/*'"
10-
ngf-max-size="10MB"
11-
ngf-accept="'image/*'">
12-
<i class="glyphicon glyphicon-camera" style="font-size: 10em;"></i>
13-
</a>
14-
</div>
15-
<div>
16-
<images-upload-preview images="$ctrl.images" on-delete="$ctrl.deleteImage()"/>
4+
<div class="col-md-8 col-md-push-2 col-xs-12">
5+
<div align="center">
6+
<label translate="publisher.recipe.images-tips"/>
7+
</div>
8+
<div class="recipe-images-uploader" align="center">
9+
<a href="" ngf-select ng-model="$ctrl.images" ngf-multiple="true" ngf-keep="true"
10+
ngf-pattern="'image/*'"
11+
ngf-max-size="10MB"
12+
ngf-accept="'image/*'">
13+
<i class="glyphicon glyphicon-camera" style="font-size: 10em;"></i>
14+
</a>
15+
</div>
16+
<div>
17+
<images-upload-preview images="$ctrl.images" on-delete="$ctrl.deleteImage()"/>
18+
</div>
19+
1720
</div>
1821
</div>
1922

20-
<div class="row wizard-nav">
21-
<div class="col-md-12">
23+
<div class="row">
24+
<div class="wizard-nav col-md-8 col-md-push-2 col-xs-12">
2225
<button class="btn btn-primary btn-default pull-left"
2326
type="button"
2427
ng-click="$ctrl.previousStep()"

‎src/main/webapp/app/social/publisher/components/recipe-wizard/recipe-ingredients/recipe-ingredients.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="container no-padding">
22
<div class="row">
3-
<div class="col-md-12">
3+
<div class="col-md-8 col-md-push-2 col-xs-12">
44
<div>
55
<p class="text-muted"
66
translate="publisher.recipe.ingredients.tips">
@@ -35,8 +35,8 @@
3535
</div>
3636
</div>
3737

38-
<div class="row">
39-
<div class="col-md-6 col-md-push-2 col-xs-12">
38+
<div class="row" ng-if="$ctrl.ingredients.length>0">
39+
<div class="col-md-8 col-md-push-2 col-xs-12">
4040
<h5 translate="publisher.recipe.my-ingredients"/>
4141
<ul class="list-group">
4242
<li class="list-group-item"
@@ -52,8 +52,8 @@ <h5 translate="publisher.recipe.my-ingredients"/>
5252
</ul>
5353
</div>
5454
</div>
55-
<div class="row wizard-nav">
56-
<div class="col-md-12">
55+
<div class="row">
56+
<div class="wizard-nav col-md-8 col-md-push-2 col-xs-12">
5757
<button class="btn btn-primary btn-default pull-left"
5858
type="button"
5959
ng-click="$ctrl.previousStep()"

‎src/main/webapp/app/social/publisher/components/recipe-wizard/recipe-instructions/recipe-instructions.html

+14-14
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<div class="container">
22
<div class="row">
3-
<p class="text-muted"
4-
translate="publisher.recipe.instructions.tips">
5-
</p>
6-
<div class="col-md-12">
3+
<div class="col-md-8 col-md-push-2 col-xs-12">
4+
<p class="text-muted"
5+
translate="publisher.recipe.instructions.tips">
6+
</p>
77
<form class="form-horizontal" name="instructions_form">
88

99
<div class="form-group" ng-repeat="instruction in $ctrl.instructions">
10-
<label>{{publisher.recipe.instructions.step|translate}} {{$index+1}}
10+
<label>{{'publisher.recipe.instructions.step'|translate}} {{$index+1}}
1111
</label>
1212
<button ng-click="$ctrl.removeInstruction($index)"
1313
class="btn btn-circle btn-warning pull-right">
@@ -18,21 +18,21 @@
1818
required
1919
ng-focus="true"
2020
type="text"
21-
class="form-control input-lg"
21+
class="form-control"
2222
placeholder="{{'publisher.recipe.instructions.text-placeholder'|translate}}"
2323
/>
2424
</div>
2525
</form>
2626
</div>
27-
<div>
28-
<button ng-click="$ctrl.addInstruction()"
29-
class="btn btn-success"
30-
translate="publisher.recipe.instructions.add-step-button"/>
31-
</div>
3227
</div>
33-
<hr/>
34-
<div class="row wizard-nav">
35-
<div class="col-md-12">
28+
<div class="row col-md-8 col-md-push-2 col-xs-12">
29+
<button ng-click="$ctrl.addInstruction()"
30+
class="btn btn-success">
31+
<i class="glyphicon glyphicon-plus"></i>
32+
</button>
33+
</div>
34+
<div class="row">
35+
<div class="wizard-nav col-md-8 col-md-push-2 col-xs-12">
3636
<button class="btn btn-primary btn-default pull-left"
3737
type="button"
3838
ng-click="$ctrl.previousStep()"

‎src/main/webapp/app/social/publisher/components/recipe-wizard/recipe-summary/recipe-summary.html

+24-24
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
<div class="container" ng-form="form">
22
<div class="row">
3-
<div class="col-md-12">
3+
<div class="col-md-8 col-lg-push-2">
44
<form class="form-horizontal">
55
<div class="form-group">
6-
<div class="col-md-12">
7-
<label translate="publisher.recipe.title"/>
8-
<input ng-model="$ctrl.recipe.title"
9-
maxlength="255"
10-
type="text"
11-
class="form-control input--textbox"
12-
id="title"
13-
placeholder="{{'publisher.recipe.title-placeholder'|translate}}"/>
14-
</div>
6+
<label translate="publisher.recipe.title"/>
7+
<input ng-model="$ctrl.recipe.title"
8+
maxlength="255"
9+
type="text"
10+
class="form-control input--textbox"
11+
id="title"
12+
placeholder="{{'publisher.recipe.title-placeholder'|translate}}"
13+
/>
14+
1515
</div>
1616
<div class="form-group">
17-
<div class="col-md-12">
18-
<label translate="publisher.recipe.description"/>
19-
<textarea ng-model="$ctrl.recipe.description"
20-
maxlength="255"
21-
class="form-control"
22-
id="description"
23-
placeholder="{{'publisher.recipe.description-placeholder'|translate}}"
24-
style="height: 10em;"/>
25-
</div>
17+
<label translate="publisher.recipe.description"/>
18+
<textarea ng-model="$ctrl.recipe.description"
19+
maxlength="255"
20+
class="form-control"
21+
id="description"
22+
placeholder="{{'publisher.recipe.description-placeholder'|translate}}"
23+
style="height: 10em;"
24+
/>
25+
2626
</div>
2727
</form>
2828
</div>
2929
</div>
3030

3131
<div class="row">
32-
<div class="form-group">
33-
<div class="col-md-6">
32+
<div class="col-md-8 col-md-push-2 col-xs-12 no-padding">
33+
<div class="form-group col-md-6">
3434
<label translate="publisher.recipe.cook-time"/>
3535
<div class="input-group">
3636
<input ng-model="$ctrl.recipe.cookTime"
@@ -42,7 +42,7 @@
4242
<span class="input-group-addon" translate="publisher.recipe.time-unit">min</span>
4343
</div>
4444
</div>
45-
<div class="col-md-6">
45+
<div class="form-group col-md-6">
4646
<label translate="publisher.recipe.preparation-time"/>
4747
<div class="input-group">
4848
<input ng-model="$ctrl.recipe.preparationTime"
@@ -56,8 +56,8 @@
5656
</div>
5757
</div>
5858
</div>
59-
<div class="row wizard-nav">
60-
<div class="col-md-12">
59+
<div class="row">
60+
<div class="wizard-nav col-md-8 col-md-push-2 col-xs-12 no-padding">
6161
<button class="btn btn-primary btn-default pull-right"
6262
type="button"
6363
ng-click="$ctrl.nextStep()"

‎src/main/webapp/assets/css/buttons.css

+12
Original file line numberDiff line numberDiff line change
@@ -181,4 +181,16 @@ a, button {
181181

182182
.google-auth .auth-container {
183183
background-color: #D34836;
184+
}
185+
186+
.btn-primary {
187+
color: #fff;
188+
background-color: #FB3;
189+
border-color: transparent;
190+
}
191+
192+
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
193+
color: #fff;
194+
background-color: #fa0;
195+
border-color: transparent;
184196
}

‎src/main/webapp/assets/css/recipe-wizard.css

+3-1
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,7 @@
1010
}
1111

1212
.wizard-nav{
13-
margin-top:2%;
13+
margin-top: 10px;
14+
border-top: 1px solid #c2c9d4;
15+
padding: 10px;
1416
}

‎src/main/webapp/i18n/fr/publisher.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
},
77
"recipe": {
88
"title": "Titre",
9-
"title-placeholder": "Le titre de ta recette",
9+
"title-placeholder": "Personnalise le titre de ta recette",
1010
"description": "Description",
11-
"description-placeholder": "Rédige une brève description de ta recette",
11+
"description-placeholder": "Laisse un commentaire personnel sur ta recette ! Mettez-nous l'eau à la bouche !",
1212
"preparation-time": "Temps de préparation",
1313
"cook-time": "Temps de cuisson",
1414
"add-ingredients-button": "Ajouter des ingrédients",

0 commit comments

Comments
 (0)