Luis Suarez / autoservicio-axion

1

1

2

2

3

<app-header-publicidad></app-header-publicidad>

3

<app-header-publicidad></app-header-publicidad>

4

5

5

6

6

7

7

8

8

9

9

10

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

10

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

11

</div>

11

</div>

12

</div>

12

</div>

13

</div>

13

</div>

14

14

15

15

16

16

17

17

18

18

19

19

20

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

20

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

21

21

22

22

23

<img

23

<img

24

draggable="false"

24

draggable="false"

25

ondragstart="return false;"

25

ondragstart="return false;"

26

(contextmenu)="false"

26

(contextmenu)="false"

27

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

27

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

28

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

28

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

29

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

29

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

30

(mouseup)="mouseup()"

30

(mouseup)="mouseup()"

31

(mouseleave)="mouseup()">

31

(mouseleave)="mouseup()">

32

</div>

32

</div>

33

33

34

<div

34

<div

35

#templateCategorias

35

#templateCategorias

36

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

36

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

37

<div

37

<div

38

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

38

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

39

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

39

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

40

(click)="selectCategoria(-1, 0)">

40

(click)="selectCategoria(-1, 0)">

41

<img

41

<img

42

draggable="false"

42

draggable="false"

43

ondragstart="return false;"

43

ondragstart="return false;"

44

(contextmenu)="false"

44

(contextmenu)="false"

45

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

45

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

46

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

46

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

47

<small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>

47

<small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>

48

</div>

48

</div>

49

<div

49

<div

50

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

50

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

51

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

51

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

52

(click)="selectCategoria(i, categoria.id)"

52

(click)="selectCategoria(i, categoria.id)"

53

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

53

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

54

<img

54

<img

55

draggable="false"

55

draggable="false"

56

ondragstart="return false;"

56

ondragstart="return false;"

57

(contextmenu)="false"

57

(contextmenu)="false"

58

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

58

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

59

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

59

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

60

<small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>

60

<small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>

61

</div>

61

</div>

62

</div>

62

</div>

63

63

64

<img

64

<img

65

draggable="false"

65

draggable="false"

66

ondragstart="return false;"

66

ondragstart="return false;"

67

(contextmenu)="false"

67

(contextmenu)="false"

68

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

68

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

69

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

69

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

70

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

70

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

71

(mouseup)="mouseup()"

71

(mouseup)="mouseup()"

72

(mouseleave)="mouseup()">

72

(mouseleave)="mouseup()">

73

</div>

73

</div>

74

</div>

74

</div>

75

</div>

75

</div>

76

76

77

77

78

78

79

79

80

<div

80

<div

81

class="col px-2 my-1 my-md-3 h-auto"

81

class="col px-2 my-1 my-md-3 h-auto"

82

*ngFor="let articulo of auxArticulos | slice:0:showQuantity;">

82

*ngFor="let articulo of auxArticulos | slice:0:showQuantity;">

83

83

84

<img

84

<img

85

draggable="false"

85

draggable="false"

86

ondragstart="return false;"

86

ondragstart="return false;"

87

(contextmenu)="false"

87

(contextmenu)="false"

88

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

88

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

89

onerror="this.src='assets/img/image-not-found.jpg'"

89

onerror="this.src='assets/img/image-not-found.jpg'"

90

class="card-img-top h-55 rounded-sm">

90

class="card-img-top h-55 rounded-sm">

91

91

92

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

92

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

93

93

94

<small>{{articulo.DET_LAR}}</small>

94

<small>{{articulo.DET_LAR}}</small>

95

</p>

95

</p>

96

96

97

<div

97

<div

98

[ngClass]="{'bg-secondary': articulo.promo}"

98

[ngClass]="{'bg-secondary': articulo.promo}"

99

class="row mx-0 justify-content-between bg-primary badge-pill"

99

class="row mx-0 justify-content-between bg-primary badge-pill"

100

(click)="elegirArticulo(articulo)">

100

(click)="elegirArticulo(articulo)">

101

101

102

103

</div>

103

</div>

104

104

105

<img

105

<img

106

draggable="false"

106

draggable="false"

107

ondragstart="return false;"

107

ondragstart="return false;"

108

(contextmenu)="false"

108

(contextmenu)="false"

109

class="d-block ml-auto py-1 icon-30"

109

class="d-block ml-auto py-1 icon-30"

110

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

110

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

111

</div>

111

</div>

112

</div>

112

</div>

113

</div>

113

</div>

114

</div>

114

</div>

115

</div>

115

</div>

116

</div>

116

</div>

117

</div>

117

</div>

118

118

119

119

120

<div

120

<div

121

*ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"

121

*ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"

122

class="col-12 px-0 mb-2">

122

class="col-12 px-0 mb-2">

123

<button

123

<button

124

(click)="increaseShow()"

124

(click)="increaseShow()"

125

class="btn btn-block btn-outline-primary">

125

class="btn btn-block btn-outline-primary">

126

126

127

</button>

127

</button>

128

</div>

128

</div>

129

</div>

129

</div>

130

</div>

130

</div>

131

</div>

131

</div>

132

</div>

132

</div>

133

</div>

133

</div>

134

134

135

135

136

136

137

137

138

138

139

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

139

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

140

</div>

140

</div>

141

141

142

142

143

143

144

144

145

<img

145

<img

146

draggable="false"

146

draggable="false"

147

ondragstart="return false;"

147

ondragstart="return false;"

148

(contextmenu)="false"

148

(contextmenu)="false"

149

class="icon-30 rotate-180-neg"

149

class="icon-30 rotate-180-neg"

150

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

150

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

151

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

151

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

152

(mouseup)="mouseup()"

152

(mouseup)="mouseup()"

153

(mouseleave)="mouseup()">

153

(mouseleave)="mouseup()">

154

</div>

154

</div>

155

155

156

156

157

157

158

158

159

159

160

<p class="text-center py-5">No hay articulos en el carrito</p>

160

<p class="text-center py-5">No hay articulos en el carrito</p>

161

</div>

161

</div>

162

162

163

<div

163

<div

164

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

164

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

165

*ngFor="let articulo of articuloService.carrito; let i = index;">

165

*ngFor="let articulo of articuloService.carrito; let i = index;">

166

166

167

<img

167

<img

168

draggable="false"

168

draggable="false"

169

ondragstart="return false;"

169

ondragstart="return false;"

170

(contextmenu)="false"

170

(contextmenu)="false"

171

class="d-block img-fluid p-2 mx-auto rounded"

171

class="d-block img-fluid p-2 mx-auto rounded"

172

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

172

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

173

onerror="this.src='assets/img/image-not-found.jpg'">

173

onerror="this.src='assets/img/image-not-found.jpg'">

174

174

175

<small>{{articulo.DetArt}}</small>

175

<small>{{articulo.DetArt}}</small>

176

</p>

176

</p>

177

</div>

177

</div>

178

</div>

178

</div>

179

</div>

179

</div>

180

</div>

180

</div>

181

181

182

182

183

<img

183

<img

184

draggable="false"

184

draggable="false"

185

ondragstart="return false;"

185

ondragstart="return false;"

186

(contextmenu)="false"

186

(contextmenu)="false"

187

class="icon-30"

187

class="icon-30"

188

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

188

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

189

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

189

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

190

(mouseup)="mouseup()"

190

(mouseup)="mouseup()"

191

(mouseleave)="mouseup()">

191

(mouseleave)="mouseup()">

192

</div>

192

</div>

193

</div>

193

</div>

194

</div>

194

</div>

195

196

195

197

<div

196

<div

198

class="col-auto p-0 mt-2 ml-auto h-20"

197

class="col-auto p-0 mt-2 ml-auto h-20"

199

*ngIf="articuloService.carrito.length">

198

*ngIf="articuloService.carrito.length">

200

<div

199

<div

201

class="btn-effect col-auto align-self-center px-0 bg-white"

200

class="btn-effect col-auto align-self-center px-0 bg-white"

202

[routerLink]="['/carrito']">

201

[routerLink]="['/carrito']">

203

202

204

<div class="col-auto align-self-center text-primary">TOTAL</div>

203

<div class="col-auto align-self-center text-primary">TOTAL</div>

205

204

206

205

207

</div>

206

</div>

208

209

<div class="col-auto align-self-center text-primary ml-2">VER CARRITO</div>

207

<div class="col-auto align-self-center text-primary ml-2">VER CARRITO</div>

210

208

211

<img

209

<img

212

draggable="false"

210

draggable="false"

213

ondragstart="return false;"

211

ondragstart="return false;"

214

(contextmenu)="false"

212

(contextmenu)="false"

215

class="p-2 icon-40"

213

class="p-2 icon-40"

216

src="assets/img/carrito.svg">

214

src="assets/img/carrito.svg">

217

</div>

215

</div>

218

</div>

216

</div>

219

</div>

217

</div>

220

</div>

218

</div>

221

219

222

223

224

</div>

220

</div>

225

</div>

221

</div>

226

222

227

</div>

223

</div>

228

224

GITLAB

Luis Suarez / autoservicio-axion

cambio posicion total

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
   <div class="row mx-0 h-80 align-items-end">
     <!-- CABECERA -->
     <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 p-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
         </div>
       </div>
     </div>
     <!-- CUERPO -->
     <div class="row w-100 mr-4 h-70">
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
           <!-- FILTRO CATEGORIAS -->
           <div class="col-5 col-sm-3 col-xl-2 h-100">
             <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
             <div class="row mx-0 h-94 justify-content-center align-items-center">
               <div class="col-auto btn-effect h-5">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90-neg"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, -100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
               <!-- CATEGORIAS -->
               <div
                 #templateCategorias
                 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
                 <div
                   class="row mx-4 mb-2 h-32 justify-content-center tab"
                   [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
                   (click)="selectCategoria(-1, 0)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                     src="assets/img/ir-color.svg">
                   <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
                 </div>
                 <div
                   class="row mx-4 mb-2 h-32 justify-content-center tab"
                   [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
                   (click)="selectCategoria(i, categoria.id)"
                   *ngFor="let categoria of categorias; let i = index;">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                     src="assets/img/ir-color.svg">
                   <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
                 </div>
               </div>
               <div class="col-auto btn-effect h-5">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, 100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
             </div>
           </div>
           <!-- LISTA DE ARTICULOS -->
           <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
               <!-- ARTICULO -->
               <div
                 class="col px-2 my-1 my-md-3 h-auto"
                 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
                 <div class="swing-in-top-fwd card h-auto">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'"
                     class="card-img-top h-55 rounded-sm">
                   <div class="row mx-0 py-1 h-auto justify-content-center">
                     <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p>
                     <p class="col-12 px-1 h-auto text-center line-height-sm">
                       <small>{{articulo.DET_LAR}}</small>
                     </p>
                     <div class="col-12 px-1 align-self-end btn-effect h-auto">
                       <div
                         [ngClass]="{'bg-secondary': articulo.promo}"
                         class="row mx-0 justify-content-between bg-primary badge-pill"
                         (click)="elegirArticulo(articulo)">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{articulo.PreVen | currency}}
                         </div>
                         <div class="col-5 px-0">
                           <img
                             draggable="false"
                             ondragstart="return false;"
                             (contextmenu)="false"
                             class="d-block ml-auto py-1 icon-30"
                             src="assets/img/ir.svg">
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- BOTON VER MAS -->
             <div class="row mx-0">
               <div
                 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
                 class="col-12 px-0 mb-2">
                 <button
                   (click)="increaseShow()"
                   class="btn btn-block btn-outline-primary">
                   Ver Más
                 </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- FOOTER CARRITO DE COMPRAS -->
     <div class="row w-90 mx-auto h-auto justify-content-center">
       <div class="col-12 h-75 px-0 border border-primary rounded">
         <!-- CABECERA -->
         <div class="row mx-0 h-15 border-bottom border-primary">
           <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
         </div>
         <!-- CUERPO -->
         <div class="row h-85 mx-0 justify-content-around">
           <!-- BOTON SCROLL IZQUIERDA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30 rotate-180-neg"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, -100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
           <!-- CARRITO -->
           <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
             <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
               <!-- MENSAJE DE ADVERTENCIA -->
               <div *ngIf="!articuloService.carrito.length" class="col h-100">
                 <p class="text-center py-5">No hay articulos en el carrito</p>
               </div>
               <!-- ARTICULOS -->
               <div
                 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
                 *ngFor="let articulo of articuloService.carrito; let i = index;">
                 <div class="swing-in-top-fwd">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="d-block img-fluid p-2 mx-auto rounded"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'">
                   <p class="d-block mt-auto text-center text-primary text-truncate">
                     <small>{{articulo.DetArt}}</small>
                   </p>
                 </div>
               </div>
             </div>
           </div>
           <!-- BOTON SCROLL DERECHA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, 100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
         </div>
       </div>
-      <div class="row">
       <!-- VER CARRITO Y TOTAL-->
       <div
         class="col-auto p-0 mt-2 ml-auto h-20"
         *ngIf="articuloService.carrito.length">
         <div
           class="btn-effect col-auto align-self-center px-0 bg-white"
           [routerLink]="['/carrito']">
           <div class="row justify-content-between mx-0 bg-light">
             <div class="col-auto align-self-center text-primary">TOTAL</div>
             <div class="col-auto p-0 bg-primary d-none d-sm-block total-background">
               <p class="text-center text-white mt-1 py-1">$---</p>
             </div>
-            <div class="lala"></div>
             <div class="col-auto align-self-center text-primary ml-2">VER CARRITO</div>
             <div class="col-auto p-0 bg-primary d-none d-sm-block">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="p-2 icon-40"
                 src="assets/img/carrito.svg">
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

 $primary: #aa006b;
 .box-categorias {
   height: calc(100% - 100px) !important;
 }
 .active {
   background-color: white;
   border-bottom: 3px solid $primary !important;
 }
 .border-bottom-effect {
   border: none;
   position: relative;
   &:hover {
     border: none;
   }
   &::after {
     content: "";
     position: absolute;
     width: 0px;
     height: 3px;
     left: 50%;
     bottom: 0;
     background-color: $primary;
     transition: all ease-in-out 0.2s;
   }
   &:hover::after {
     width: 100%;
     left: 0;
   }
 }
 .card {
   border: none;
 }
 .line-height-sm {
   line-height: 1.2;
 }
 .total-background {
   width: 110px;
   border-radius: 1.5rem;
 }
-.lala {
-  width: 200px;
-  background-color: white;
-}