Luis Suarez / autoservicio-axion

1

1

2

2

3

3

4

4

5

5

6

</div>

6

</div>

7

</div>

7

</div>

8

8

9

9

10

10

11

11

12

12

13

13

<p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>

14

<p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>

15

</div>

16

</div>

14

</div>

17

</div>

15

</div>

18

16

</div>

19

17

20

18

21

19

22

20

23

21

24

<p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>

22

25

23

<p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>

26

24

27

<img

25

28

draggable="false"

26

<img

29

ondragstart="return false;"

27

draggable="false"

30

(contextmenu)="false"

28

ondragstart="return false;"

31

class="h-100 d-block mx-auto rotate-90-neg"

29

(contextmenu)="false"

32

src="assets/img/ir-color.svg"

30

class="h-100 d-block mx-auto rotate-90-neg"

33

(mousedown)="scrollY(templateCategorias, -80)"

31

src="assets/img/ir-color.svg"

34

(mouseup)="mouseup()"

32

(mousedown)="scrollY(templateCategorias, -80)"

35

(mouseleave)="mouseup()">

33

(mouseup)="mouseup()"

36

</div>

34

(mouseleave)="mouseup()">

37

35

</div>

36

37

<div

38

#templateCategorias

39

class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">

38

<div

40

<div

39

#templateCategorias

41

class="row mx-4 mb-2 h-32 justify-content-center tab"

40

class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">

42

[ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"

41

<div

43

(click)="selectCategoria(i)"

42

class="row mx-4 mb-2 h-32 justify-content-center tab"

44

*ngFor="let categoria of categorias; let i = index;">

43

[ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"

44

(click)="selectCategoria(i)"

45

*ngFor="let categoria of categorias; let i = index;">

46

<img

47

class="col-12 h-50 align-self-end d-none d-sm-block"

48

src="assets/img/ir-color.svg">

49

<small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>

50

</div>

51

</div>

52

53

<img

45

<img

54

draggable="false"

46

class="col-12 h-50 align-self-end d-none d-sm-block"

55

ondragstart="return false;"

47

src="assets/img/ir-color.svg">

56

(contextmenu)="false"

48

<small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>

57

class="h-100 d-block mx-auto rotate-90"

58

src="assets/img/ir-color.svg"

59

(mousedown)="scrollY(templateCategorias, 80)"

60

(mouseup)="mouseup()"

61

(mouseleave)="mouseup()">

62

</div>

49

</div>

63

</div>

50

</div>

51

52

<img

53

draggable="false"

54

ondragstart="return false;"

55

(contextmenu)="false"

56

class="h-100 d-block mx-auto rotate-90"

57

src="assets/img/ir-color.svg"

58

(mousedown)="scrollY(templateCategorias, 80)"

59

(mouseup)="mouseup()"

60

(mouseleave)="mouseup()">

61

</div>

64

</div>

62

</div>

65

63

</div>

66

64

67

65

68

66

69

67

70

68

71

69

72

70

73

<p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>

71

74

<p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>

72

<p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>

75

73

<p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>

76

74

77

75

78

76

79

</div>

77

80

78

</div>

81

79

82

</div>

80

83

</div>

81

</div>

84

</div>

82

</div>

85

</div>

83

</div>

86

</div>

84

</div>

87

</div>

85

</div>

88

</div>

86

</div>

89

</div>

87

</div>

90

</div>

88

</div>

91

</div>

89

</div>

92

</div>

90

</div>

93

91

</div>

94

92

95

93

96

94

97

<p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>

95

96

<p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>

97

</div>

98

99

100

<img

101

draggable="false"

102

ondragstart="return false;"

103

(contextmenu)="false"

104

class="img-ir rotate-180-neg"

105

src="assets/img/ir-fondo-color.svg"

106

(mousedown)="scrollX(templateCarrito, -100)"

107

(mouseup)="mouseup()"

108

(mouseleave)="mouseup()">

98

</div>

109

</div>

99

110

100

111

101

<img

112

<div

102

draggable="false"

113

class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-auto align-self-center border-right border-primary"

103

ondragstart="return false;"

114

(click)="selectCategoria(i)"

104

(contextmenu)="false"

115

*ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">

105

class="img-ir rotate-180-neg"

116

<img

106

src="assets/img/ir-fondo-color.svg"

117

class="d-block h-55 p-2 mx-auto"

107

(mousedown)="scrollX(templateCarrito, -100)"

118

src="assets/img/ir-color.svg">

108

(mouseup)="mouseup()"

119

109

(mouseleave)="mouseup()">

110

</div>

111

112

113

<div

114

class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-auto align-self-center border-right border-primary"

115

(click)="selectCategoria(i)"

116

*ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">

117

<img

118

class="d-block h-55 p-2 mx-auto"

119

src="assets/img/ir-color.svg">

120

121

</div>

122

</div>

120

</div>

123

</div>

121

</div>

124

122

</div>

GITLAB

Luis Suarez / autoservicio-axion

Arreglo visual

1	<div class="h-92 bg-white fade-in-left">	1	<div class="h-92 bg-white fade-in-left">
2	<!-- PUBLICIDADES -->	2	<!-- PUBLICIDADES -->
3	<div class="row mx-0 h-10">	3	<div class="row mx-0 h-10">
4	<div class="col-12 p-3 h-100">	4	<div class="col-12 p-3 h-100">
5	<div class="bg-dark h-100"></div>	5	<div class="bg-dark h-100"></div>
6	</div>	6	</div>
7	</div>	7	</div>
8	<div class="row mx-0 h-90 align-items-end">	8	<div class="mx-0 h-90 align-items-end">
9	<div class="col-12 px-0 h-100">	9	<!-- CABECERA -->
10	<!-- CABECERA -->	10	<div class="row mx-4 h-auto border border-primary rounded-sm">
11	<div class="row mx-4 h-auto border border-primary rounded-sm">	11	<div class="col-12 p-2 align-self-center">
12	<div class="col-12 p-2 align-self-center">	12	<div class="px-3">
13	<div class="px-3">	13	<p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
14	<p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
15	</div>
16	</div>	14	</div>
17	</div>	15	</div>
18	<!-- CUERPO -->	16	</div>
19	<div class="row mr-4 h-70">	17	<!-- CUERPO -->
20	<div class="col-12 h-100 px-0 py-3">	18	<div class="row mr-4 h-70">
21	<div class="row mx-0 h-100">	19	<div class="col-12 h-100 px-0 py-3">
22	<!-- FILTRO CATEGORIAS -->	20	<div class="row mx-0 h-100">
23	<div class="col-5 col-sm-3 col-xl-2 h-100">	21	<!-- FILTRO CATEGORIAS -->
24	<p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>	22	<div class="col-5 col-sm-3 col-xl-2 h-100">
25	<div class="row mx-0 h-94 align-items-center">	23	<p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
26	<div class="col-12 h-5">	24	<div class="row mx-0 h-94 align-items-center">
27	<img	25	<div class="col-12 h-5">
28	draggable="false"	26	<img
29	ondragstart="return false;"	27	draggable="false"
30	(contextmenu)="false"	28	ondragstart="return false;"
31	class="h-100 d-block mx-auto rotate-90-neg"	29	(contextmenu)="false"
32	src="assets/img/ir-color.svg"	30	class="h-100 d-block mx-auto rotate-90-neg"
33	(mousedown)="scrollY(templateCategorias, -80)"	31	src="assets/img/ir-color.svg"
34	(mouseup)="mouseup()"	32	(mousedown)="scrollY(templateCategorias, -80)"
35	(mouseleave)="mouseup()">	33	(mouseup)="mouseup()"
36	</div>	34	(mouseleave)="mouseup()">
37	<!-- CATEGORIAS -->	35	</div>
		36	<!-- CATEGORIAS -->
		37	<div
		38	#templateCategorias
		39	class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
38	<div	40	<div
39	#templateCategorias	41	class="row mx-4 mb-2 h-32 justify-content-center tab"
40	class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">	42	[ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
41	<div	43	(click)="selectCategoria(i)"
42	class="row mx-4 mb-2 h-32 justify-content-center tab"	44	*ngFor="let categoria of categorias; let i = index;">
43	[ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
44	(click)="selectCategoria(i)"
45	*ngFor="let categoria of categorias; let i = index;">
46	<img
47	class="col-12 h-50 align-self-end d-none d-sm-block"
48	src="assets/img/ir-color.svg">
49	<small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
50	</div>
51	</div>
52	<div class="col-12 h-5">
53	<img	45	<img
54	draggable="false"	46	class="col-12 h-50 align-self-end d-none d-sm-block"
55	ondragstart="return false;"	47	src="assets/img/ir-color.svg">
56	(contextmenu)="false"	48	<small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
57	class="h-100 d-block mx-auto rotate-90"
58	src="assets/img/ir-color.svg"
59	(mousedown)="scrollY(templateCategorias, 80)"
60	(mouseup)="mouseup()"
61	(mouseleave)="mouseup()">
62	</div>	49	</div>
63	</div>	50	</div>
		51	<div class="col-12 h-5">
		52	<img
		53	draggable="false"
		54	ondragstart="return false;"
		55	(contextmenu)="false"
		56	class="h-100 d-block mx-auto rotate-90"
		57	src="assets/img/ir-color.svg"
		58	(mousedown)="scrollY(templateCategorias, 80)"
		59	(mouseup)="mouseup()"
		60	(mouseleave)="mouseup()">
		61	</div>
64	</div>	62	</div>
65	<!-- LISTA DE ARTICULOS -->	63	</div>
66	<div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">	64	<!-- LISTA DE ARTICULOS -->
67	<div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">	65	<div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
68	<!-- ARTICULO -->	66	<div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
69	<div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">	67	<!-- ARTICULO -->
70	<div class="card h-100">	68	<div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
71	<img src="assets/img/ir-color.svg" class="card-img-top h-55">	69	<div class="card h-100">
72	<div class="row mx-0 py-1 h-auto justify-content-center">	70	<img src="assets/img/ir-color.svg" class="card-img-top h-55">
73	<p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>	71	<div class="row mx-0 py-1 h-auto justify-content-center">
74	<p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>	72	<p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
75	<div class="col-12 px-1 align-self-end btn-effect h-auto">	73	<p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
76	<div class="row mx-0 justify-content-between bg-primary badge-pill">	74	<div class="col-12 px-1 align-self-end btn-effect h-auto">
77	<div class="col px-0 align-self-center text-white text-right">	75	<div class="row mx-0 justify-content-between bg-primary badge-pill">
78	{{55 \| currency}}	76	<div class="col px-0 align-self-center text-white text-right">
79	</div>	77	{{55 \| currency}}
80	<div class="col-5 px-0">	78	</div>
81	<img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">	79	<div class="col-5 px-0">
82	</div>	80	<img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">
83	</div>	81	</div>
84	</div>	82	</div>
85	</div>	83	</div>
86	</div>	84	</div>
87	</div>	85	</div>
88	</div>	86	</div>
89	</div>	87	</div>
90	</div>	88	</div>
91	</div>	89	</div>
92	</div>	90	</div>
93	<!-- FOOTER CARRITO DE COMPRAS -->	91	</div>
94	<div class="row w-90 mx-auto h-auto justify-content-center">	92	<!-- FOOTER CARRITO DE COMPRAS -->
95	<div class="col-12 h-75 px-0 border border-primary rounded">	93	<div class="row w-90 mx-auto h-auto justify-content-center">
96	<div class="row mx-0 h-15 border-bottom border-primary">	94	<div class="col-12 h-75 px-0 border border-primary rounded">
97	<p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>	95	<div class="row mx-0 h-15 border-bottom border-primary">
		96	<p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
		97	</div>
		98	<div class="row h-85 mx-0 justify-content-between">
		99	<div class="col-auto h-20 align-self-center">
		100	<img
		101	draggable="false"
		102	ondragstart="return false;"
		103	(contextmenu)="false"
		104	class="img-ir rotate-180-neg"
		105	src="assets/img/ir-fondo-color.svg"
		106	(mousedown)="scrollX(templateCarrito, -100)"
		107	(mouseup)="mouseup()"
		108	(mouseleave)="mouseup()">
98	</div>	109	</div>
99	<div class="row h-85 mx-0 justify-content-between">	110	<div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
100	<div class="col-auto h-20 align-self-center">	111	<div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
101	<img	112	<div
102	draggable="false"	113	class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-auto align-self-center border-right border-primary"
103	ondragstart="return false;"	114	(click)="selectCategoria(i)"
104	(contextmenu)="false"	115	*ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
105	class="img-ir rotate-180-neg"	116	<img
106	src="assets/img/ir-fondo-color.svg"	117	class="d-block h-55 p-2 mx-auto"
107	(mousedown)="scrollX(templateCarrito, -100)"	118	src="assets/img/ir-color.svg">
108	(mouseup)="mouseup()"	119	<p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
109	(mouseleave)="mouseup()">
110	</div>
111	<div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
112	<div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
113	<div
114	class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-auto align-self-center border-right border-primary"
115	(click)="selectCategoria(i)"
116	*ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
117	<img
118	class="d-block h-55 p-2 mx-auto"
119	src="assets/img/ir-color.svg">
120	<p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
121	</div>
122	</div>	120	</div>
123	</div>	121	</div>
124	<div class="col-auto h-20 align-self-center">	122	</div>