From 860c6e3c80ffacfeaa48c97d921280441c1ce358 Mon Sep 17 00:00:00 2001 From: bruno Date: Mon, 17 Jun 2024 16:52:09 -0300 Subject: [PATCH 1/5] header created --- app/assets/images/Buscar.svg | 5 + app/assets/images/Drop-down.svg | 3 + app/assets/images/Filtros.svg | 14 ++ app/assets/images/Usuario.svg | 15 ++ app/assets/images/black_Menu.svg | 5 + app/assets/images/campana.svg | 4 + app/assets/images/icon.svg | 7 + app/assets/images/notificacion.svg | 3 + .../stylesheets/application.bootstrap.scss | 28 ++-- .../controllers/header_controller.js | 20 +++ app/javascript/controllers/index.js | 3 + app/views/application/_header.html.erb | 142 ++++++++++++++++++ app/views/home/index.html.erb | 7 +- app/views/layouts/application.html.erb | 1 + config/routes.rb | 6 + 15 files changed, 242 insertions(+), 21 deletions(-) create mode 100644 app/assets/images/Buscar.svg create mode 100644 app/assets/images/Drop-down.svg create mode 100644 app/assets/images/Filtros.svg create mode 100644 app/assets/images/Usuario.svg create mode 100644 app/assets/images/black_Menu.svg create mode 100644 app/assets/images/campana.svg create mode 100644 app/assets/images/icon.svg create mode 100644 app/assets/images/notificacion.svg create mode 100644 app/javascript/controllers/header_controller.js create mode 100644 app/views/application/_header.html.erb diff --git a/app/assets/images/Buscar.svg b/app/assets/images/Buscar.svg new file mode 100644 index 0000000..228b8bd --- /dev/null +++ b/app/assets/images/Buscar.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/assets/images/Drop-down.svg b/app/assets/images/Drop-down.svg new file mode 100644 index 0000000..54061e7 --- /dev/null +++ b/app/assets/images/Drop-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/Filtros.svg b/app/assets/images/Filtros.svg new file mode 100644 index 0000000..9e8e891 --- /dev/null +++ b/app/assets/images/Filtros.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/app/assets/images/Usuario.svg b/app/assets/images/Usuario.svg new file mode 100644 index 0000000..9ae161d --- /dev/null +++ b/app/assets/images/Usuario.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/app/assets/images/black_Menu.svg b/app/assets/images/black_Menu.svg new file mode 100644 index 0000000..7958986 --- /dev/null +++ b/app/assets/images/black_Menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/assets/images/campana.svg b/app/assets/images/campana.svg new file mode 100644 index 0000000..5be2286 --- /dev/null +++ b/app/assets/images/campana.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/images/icon.svg b/app/assets/images/icon.svg new file mode 100644 index 0000000..9452995 --- /dev/null +++ b/app/assets/images/icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/app/assets/images/notificacion.svg b/app/assets/images/notificacion.svg new file mode 100644 index 0000000..f5d75e3 --- /dev/null +++ b/app/assets/images/notificacion.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss index 856fa41..d54e2e6 100644 --- a/app/assets/stylesheets/application.bootstrap.scss +++ b/app/assets/stylesheets/application.bootstrap.scss @@ -33,7 +33,7 @@ $spacers: ( ); $theme-colors: map-merge( - $theme-colors,("blue-2":#0F58B7,"skyblue" : #9BC7FF,"grey" : #B3B3B3) + $theme-colors,("blue-2":#0F58B7,"skyblue" : #9BC7FF,"grey" : #B3B3B3, "role-grey": #7D7D7D) ); //$utilities-text-colors: map-merge($utilities-text-colors,("blue-2":#0F58B7); @@ -61,7 +61,6 @@ $utilities: map-merge( ) ), - "width": map-merge( map-get($utilities, "width"), @@ -173,7 +172,7 @@ $utilities: map-merge( skyblue: #f2f7ff, white: white, linear-sky-blue:linear-gradient(46.77deg, #0f99b7 -0.79%, #69ecdc 131.52%), - grey: #eeeeee, + grey: #F5F5F5, intensive-blue: #0f58b7, mix-blue: color-mix(in srgb, #0f58b7, #62d9ff), transparent: transparent, @@ -188,26 +187,15 @@ $utilities: map-merge( } .header-logo{ - width:100px; + width:104px; height: 33px; } -.card-size{ - width: 122px; - height: 122px; -} - .footer-logo{ width:100px; height: 38px; } -.text-in-image{ - top: 80%; - left: 50%; - transform: translate(-50%, -50%); -} - .header-decline { transform: rotate(10deg) translateY(-356px) translateX(-94px); width: 118vw; @@ -219,6 +207,13 @@ $utilities: map-merge( list-style-type: none; } +.border-bottom-style-solid { + border-bottom-style: solid; +} +.rotate-180 { + transform: rotate(180deg); +} + .border-top-solid{ border-top: solid; } @@ -301,6 +296,9 @@ $utilities: map-merge( width: 21px; height: 21px; } +.fw-200{ + font-weight: 200; +} .outline-none{ outline: none; diff --git a/app/javascript/controllers/header_controller.js b/app/javascript/controllers/header_controller.js new file mode 100644 index 0000000..97c8d26 --- /dev/null +++ b/app/javascript/controllers/header_controller.js @@ -0,0 +1,20 @@ +import { Controller } from "@hotwired/stimulus" + +// Connects to data-controller="header" +export default class extends Controller { + static targets = [ "arrow", "circle"] + static classes = [ "rotate", "hide"] + + transform_add() { + this.arrowTarget.classList.add(this.rotateClass) + } + + transform_remove() { + this.arrowTarget.classList.remove(this.rotateClass) + } + + hide() { + this.circleTarget.classList.add(this.hideClass) + } +} + diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index d0685d3..2545f62 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -4,5 +4,8 @@ import { application } from "./application" +import HeaderController from "./header_controller" +application.register("header", HeaderController) + import HelloController from "./hello_controller" application.register("hello", HelloController) diff --git a/app/views/application/_header.html.erb b/app/views/application/_header.html.erb new file mode 100644 index 0000000..54a06fb --- /dev/null +++ b/app/views/application/_header.html.erb @@ -0,0 +1,142 @@ +
+ <%=image_tag("footer_logo.svg", class: "header-logo")%> +
+
+
+ <%= link_to 'Regalos', gifts_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent'%> +
+
+ <%= link_to 'Catering', catering_index_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %> +
+
+ <%= link_to 'Merchandising', merchandising_index_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %> +
+
+ <%= link_to 'Eventos', events_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %> +
+
+
+
+ +
+ +
+
+ +
+
+
Secciones
+ +
+
+
    +
  • +
    +
    +

    1300

    +

    Puntos

    +
    + <%= link_to 'Ver más',root_path, class: 'fw-light text-blue-2 text-decoration-none' %> +
    +
    • +
  • + <%= link_to 'Regalos', gifts_path, class:'bg-text-gradient-blue-20 text-fill-color-transparent' %>
    • +
  • + <%= link_to 'Catering', catering_index_path, class:'bg-text-gradient-blue-20 text-fill-color-transparent' %>
    • +
  • + <%= link_to 'Merchandising', merchandising_index_path, class:'bg-text-gradient-blue-20 text-fill-color-transparent' %>
    • +
  • + <%= link_to 'Eventos', events_path, class:'bg-text-gradient-blue-20 text-fill-color-transparent' %>
    • +
  • + <%= link_to 'Cuenta', edit_user_registration_path, class:'fw-light text-black text-decoration-none' %>
    • +
  • <%= link_to 'Favoritos', root_path, class:'fw-light text-reset text-decoration-none' %>
    • +
  • <%= link_to 'Pedidos y consultas', root_path, class:'fw-light text-reset text-decoration-none' %>
    • +
  • <%= link_to 'Campañas y metricas', root_path, class:' fw-light text-reset text-decoration-none' %>
    • +
  • <%= link_to 'Ayuda', root_path, class:'fw-light text-grey text-decoration-none' %>
    • +
  • <%= link_to 'Cerrar sesion', destroy_user_session_path, data:{ turbo_method: "delete" }, class:'fw-light text-grey text-decoration-none' %>
    • +
+
+
+
+ +
+ +
    +
  • +
    +
    +

    1300

    +

    Puntos

    +
    + <%= link_to 'Ver más',root_path, class: 'fw-light text-blue-2 text-decoration-none' %> +
    +
    • +
  • + <%= link_to 'Cuenta', edit_user_registration_path, class:'fw-light text-black text-decoration-none' %>
    • +
  • <%= link_to 'Favoritos', root_path, class:'fw-light text-reset text-decoration-none' %>
    • +
  • <%= link_to 'Pedidos y consultas', root_path, class:'fw-light text-reset text-decoration-none' %>
    • +
  • <%= link_to 'Campañas y metricas', root_path, class:' fw-light text-reset text-decoration-none' %>
    • +
  • <%= link_to 'Ayuda', root_path, class:'fw-light text-grey text-decoration-none' %>
    • +
  • <%= link_to 'Cerrar sesion', destroy_user_session_path, data:{ turbo_method: "delete" }, class:'fw-light text-grey text-decoration-none' %>
    • +
+
+
+
+
+
+ +
+ +
+ +
+
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index b92ee83..8b13789 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -1,6 +1 @@ -

Hello word!

-<%= link_to "sign up", -new_user_registration_path%> -<%= link_to "sign Out", -destroy_user_session_path, -data:{ turbo_method: "delete" } %> + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index aca8248..1ce4b74 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -10,6 +10,7 @@ + <%=render "application/header"%> <%= render "application/flash" %> <%= yield %> diff --git a/config/routes.rb b/config/routes.rb index 7d3d2ed..913e3e6 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -9,6 +9,12 @@ # root "posts#index" root 'home#index' + + resources :gifts, path: 'regalos', only: [:index] + resources :catering, only: [:index] + resources :merchandising, only: [:index] + resources :events, path: 'eventos', only: [:index] + devise_for :users, controllers: { registrations: 'users/registrations', sessions: 'users/sessions', passwords: 'users/passwords' } From 188ceee5254026936dcd9fb30dd4b36b22859b5d Mon Sep 17 00:00:00 2001 From: bruno Date: Tue, 18 Jun 2024 10:32:40 -0300 Subject: [PATCH 2/5] added flash messages to the header --- app/views/application/_header.html.erb | 1 + app/views/layouts/application.html.erb | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/application/_header.html.erb b/app/views/application/_header.html.erb index 54a06fb..44fbc45 100644 --- a/app/views/application/_header.html.erb +++ b/app/views/application/_header.html.erb @@ -1,3 +1,4 @@ +<%= render "application/flash" %>
<%=image_tag("footer_logo.svg", class: "header-logo")%>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 1ce4b74..15f30e3 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -11,7 +11,6 @@ <%=render "application/header"%> - <%= render "application/flash" %> <%= yield %> From faf0855d8344fa04ccaf4267e9ed388c1ae8df3d Mon Sep 17 00:00:00 2001 From: bruno Date: Tue, 18 Jun 2024 10:56:19 -0300 Subject: [PATCH 3/5] correction on the routes of controllers --- app/views/application/_header.html.erb | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/application/_header.html.erb b/app/views/application/_header.html.erb index 44fbc45..8896a7a 100644 --- a/app/views/application/_header.html.erb +++ b/app/views/application/_header.html.erb @@ -3,16 +3,16 @@ <%=image_tag("footer_logo.svg", class: "header-logo")%>
-
+
<%= link_to 'Regalos', gifts_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent'%>
-
+
<%= link_to 'Catering', catering_index_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %>
-
+
<%= link_to 'Merchandising', merchandising_index_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %>
-
+
<%= link_to 'Eventos', events_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %>
From 643fadd1d02d8b2e0bc197ea3f875160cbc1a4b8 Mon Sep 17 00:00:00 2001 From: bruno Date: Tue, 18 Jun 2024 14:32:47 -0300 Subject: [PATCH 4/5] adding shadow to header --- .../stylesheets/application.bootstrap.scss | 14 + app/views/application/_header.html.erb | 256 +++++++++--------- 2 files changed, 143 insertions(+), 127 deletions(-) diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss index d54e2e6..3041dea 100644 --- a/app/assets/stylesheets/application.bootstrap.scss +++ b/app/assets/stylesheets/application.bootstrap.scss @@ -324,12 +324,26 @@ $utilities: map-merge( border-color: transparent; } +.shadow-header { + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);; +} + +.rounded-header { + border-radius: 0.375rem +} + @include media-breakpoint-up(sm) { .transform-sm { transform: rotate(10deg) translateY(-356px) translateX(-126px); } + .rounded-header { + border-radius:0px + } + .shadow-header { + box-shadow: none; + } } @include media-breakpoint-up(md) { diff --git a/app/views/application/_header.html.erb b/app/views/application/_header.html.erb index 8896a7a..9f0c63c 100644 --- a/app/views/application/_header.html.erb +++ b/app/views/application/_header.html.erb @@ -1,143 +1,145 @@ -<%= render "application/flash" %> -
- <%=image_tag("footer_logo.svg", class: "header-logo")%> -
-
-
- <%= link_to 'Regalos', gifts_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent'%> -
-
- <%= link_to 'Catering', catering_index_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %> -
-
- <%= link_to 'Merchandising', merchandising_index_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %> -
-
- <%= link_to 'Eventos', events_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %> +
+ <%= render "application/flash" %> +
+ <%=image_tag("footer_logo.svg", class: "header-logo")%> +
+
+
+ <%= link_to 'Regalos', gifts_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent'%> +
+
+ <%= link_to 'Catering', catering_index_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %> +
+
+ <%= link_to 'Merchandising', merchandising_index_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %> +
+
+ <%= link_to 'Eventos', events_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %> +
+
+
+ +
+ +
-
-
- + +
+
+
Secciones
+
- - -
- -
-
-
Secciones
- -
-
-
    -
  • -
    -
    -

    +

      +
    • +
      +
      +

      1300

      -

      Puntos

      +

      Puntos

      +
      + <%= link_to 'Ver más',root_path, class: 'fw-light text-blue-2 text-decoration-none' %>
      - <%= link_to 'Ver más',root_path, class: 'fw-light text-blue-2 text-decoration-none' %> -
    -
    • -
  • - <%= link_to 'Regalos', gifts_path, class:'bg-text-gradient-blue-20 text-fill-color-transparent' %>
    • -
  • - <%= link_to 'Catering', catering_index_path, class:'bg-text-gradient-blue-20 text-fill-color-transparent' %>
    • -
  • - <%= link_to 'Merchandising', merchandising_index_path, class:'bg-text-gradient-blue-20 text-fill-color-transparent' %>
    • -
  • - <%= link_to 'Eventos', events_path, class:'bg-text-gradient-blue-20 text-fill-color-transparent' %>
    • -
  • - <%= link_to 'Cuenta', edit_user_registration_path, class:'fw-light text-black text-decoration-none' %>
    • -
  • <%= link_to 'Favoritos', root_path, class:'fw-light text-reset text-decoration-none' %>
    • -
  • <%= link_to 'Pedidos y consultas', root_path, class:'fw-light text-reset text-decoration-none' %>
    • -
  • <%= link_to 'Campañas y metricas', root_path, class:' fw-light text-reset text-decoration-none' %>
    • -
  • <%= link_to 'Ayuda', root_path, class:'fw-light text-grey text-decoration-none' %>
    • -
  • <%= link_to 'Cerrar sesion', destroy_user_session_path, data:{ turbo_method: "delete" }, class:'fw-light text-grey text-decoration-none' %>
    • -
-
-
-
- - - -
-
-
- -
    -
  • -
    -
    -

    +

  • +
    +
    +

    1300

    -

    Puntos

    +

    Puntos

    +
    + <%= link_to 'Ver más',root_path, class: 'fw-light text-blue-2 text-decoration-none' %>
    - <%= link_to 'Ver más',root_path, class: 'fw-light text-blue-2 text-decoration-none' %> -
- -
  • - <%= link_to 'Cuenta', edit_user_registration_path, class:'fw-light text-black text-decoration-none' %>
    • -
  • <%= link_to 'Favoritos', root_path, class:'fw-light text-reset text-decoration-none' %>
    • -
  • <%= link_to 'Pedidos y consultas', root_path, class:'fw-light text-reset text-decoration-none' %>
    • -
  • <%= link_to 'Campañas y metricas', root_path, class:' fw-light text-reset text-decoration-none' %>
    • -
  • <%= link_to 'Ayuda', root_path, class:'fw-light text-grey text-decoration-none' %>
    • -
  • <%= link_to 'Cerrar sesion', destroy_user_session_path, data:{ turbo_method: "delete" }, class:'fw-light text-grey text-decoration-none' %>
    • - + +
  • + <%= link_to 'Cuenta', edit_user_registration_path, class:'fw-light text-black text-decoration-none' %>
    • +
  • <%= link_to 'Favoritos', root_path, class:'fw-light text-reset text-decoration-none' %>
    • +
  • <%= link_to 'Pedidos y consultas', root_path, class:'fw-light text-reset text-decoration-none' %>
    • +
  • <%= link_to 'Campañas y metricas', root_path, class:' fw-light text-reset text-decoration-none' %>
    • +
  • <%= link_to 'Ayuda', root_path, class:'fw-light text-grey text-decoration-none' %>
    • +
  • <%= link_to 'Cerrar sesion', destroy_user_session_path, data:{ turbo_method: "delete" }, class:'fw-light text-grey text-decoration-none' %>
    • + +
    -
    -
    -
    - -
    - -
    - -
    +
    +
    + +
    + +
    + +
    +
    From 193b70bbaadbb38ef0360af4eea57859c9c4fa38 Mon Sep 17 00:00:00 2001 From: bruno Date: Thu, 20 Jun 2024 12:51:01 -0300 Subject: [PATCH 5/5] stimulus corrections --- .../controllers/dropDown_controller.js | 16 +++++++++++++++ .../controllers/header_controller.js | 20 ------------------- app/javascript/controllers/index.js | 7 +++++-- .../controllers/notification_controller.js | 11 ++++++++++ app/views/application/_header.html.erb | 10 +++++----- 5 files changed, 37 insertions(+), 27 deletions(-) create mode 100644 app/javascript/controllers/dropDown_controller.js delete mode 100644 app/javascript/controllers/header_controller.js create mode 100644 app/javascript/controllers/notification_controller.js diff --git a/app/javascript/controllers/dropDown_controller.js b/app/javascript/controllers/dropDown_controller.js new file mode 100644 index 0000000..0286e04 --- /dev/null +++ b/app/javascript/controllers/dropDown_controller.js @@ -0,0 +1,16 @@ +import { Controller } from "@hotwired/stimulus" + +// Connects to data-controller="dropDown" +export default class extends Controller { + static targets = [ "arrow"] + static classes = [ "rotate"] + + transformAdd() { + this.arrowTarget.classList.add(this.rotateClass) + } + + transformRemove() { + this.arrowTarget.classList.remove(this.rotateClass) + } +} + diff --git a/app/javascript/controllers/header_controller.js b/app/javascript/controllers/header_controller.js deleted file mode 100644 index 97c8d26..0000000 --- a/app/javascript/controllers/header_controller.js +++ /dev/null @@ -1,20 +0,0 @@ -import { Controller } from "@hotwired/stimulus" - -// Connects to data-controller="header" -export default class extends Controller { - static targets = [ "arrow", "circle"] - static classes = [ "rotate", "hide"] - - transform_add() { - this.arrowTarget.classList.add(this.rotateClass) - } - - transform_remove() { - this.arrowTarget.classList.remove(this.rotateClass) - } - - hide() { - this.circleTarget.classList.add(this.hideClass) - } -} - diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index 2545f62..b49858b 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -4,8 +4,11 @@ import { application } from "./application" -import HeaderController from "./header_controller" -application.register("header", HeaderController) +import DropDownController from "./dropDown_controller" +application.register("dropDown", DropDownController) import HelloController from "./hello_controller" application.register("hello", HelloController) + +import NotificationController from "./notification_controller" +application.register("notification", NotificationController) diff --git a/app/javascript/controllers/notification_controller.js b/app/javascript/controllers/notification_controller.js new file mode 100644 index 0000000..7a17519 --- /dev/null +++ b/app/javascript/controllers/notification_controller.js @@ -0,0 +1,11 @@ +import { Controller } from "@hotwired/stimulus" + +// Connects to data-controller="notification" +export default class extends Controller { + static targets = [ "circle"] + static classes = [ "hide"] + + hide() { + this.circleTarget.classList.add(this.hideClass) + } +} diff --git a/app/views/application/_header.html.erb b/app/views/application/_header.html.erb index 9f0c63c..1d2c1c5 100644 --- a/app/views/application/_header.html.erb +++ b/app/views/application/_header.html.erb @@ -63,12 +63,12 @@
    -
    +