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..3041dea 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; @@ -326,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/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..9f0c63c --- /dev/null +++ b/app/views/application/_header.html.erb @@ -0,0 +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' %> +
+
+
+
+ +
+ +
+
+ +
+
+
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..15f30e3 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -10,7 +10,7 @@ - <%= render "application/flash" %> + <%=render "application/header"%> <%= 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' }