diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 816672e..1ec36e7 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -13,4 +13,163 @@ *= require_tree . *= require_self */ -@import "bootstrap/scss/bootstrap"; \ No newline at end of file +// @import "bootstrap/scss/bootstrap"; + +@import 'materialize-css/dist/css/materialize'; +@import url('https://fonts.googleapis.com/css?family=Arvo'); + +.section { + display: none; + padding: 2rem; + + @media screen and (min-width: 768px) { + padding: 4rem; + } + + @supports(display: grid) { + display: block; + } +} + +h1 { + font-size: 2rem; + margin: 0 0 1.5em; +} + +.grid { + display: grid; + grid-gap: 30px; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-auto-rows: 150px; + grid-auto-flow: row dense; +} + +.item { + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + box-sizing: border-box; + background: #0c9a9a; + color: #fff; + grid-column-start: auto; + grid-row-start: auto; + color: #fff; + background: url('https://images.unsplash.com/photo-1470124182917-cc6e71b22ecc?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop='); + background-size: cover; + background-position: center; + box-shadow: -2px 2px 10px 0px rgba(#444, 0.4); + transition: transform 0.3s ease-in-out; + cursor: pointer; + counter-increment: item-counter; + + &:nth-of-type(2n) { + background-image: url('https://res.cloudinary.com/elijjaaahhhh/image/upload/v1589651559/nick-fewings-8YhMxwhuyQM-unsplash_bskdde.jpg'); + } + + &:nth-of-type(3n) { + background-image: url('https://images.unsplash.com/photo-1422255198496-21531f12a6e8?dpr=2&auto=format&fit=crop&w=1500&h=996&q=80&cs=tinysrgb&crop='); + } + + &:nth-of-type(4n) { + background-image: url('https://images.unsplash.com/photo-1490914327627-9fe8d52f4d90?dpr=2&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop='); + } + + &:nth-of-type(5n) { + background-image: url('https://images.unsplash.com/photo-1476097297040-79e9e1603142?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop='); + } + + &:nth-of-type(6n) { + background-image: url('https://images.unsplash.com/photo-1464652149449-f3b8538144aa?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop='); + } + + &:after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: black; + opacity: 0.3; + transition: opacity 0.3s ease-in-out; + } + + &:hover { + transform: scale(1.05); + + &:after { + opacity: 0; + } + } + + &--medium { + grid-row-end: span 2; + } + + &--large { + grid-row-end: span 2; + } + + &__details { + position: relative; + z-index: 1; + padding: 15px; + color: #444; + background: #fff; + text-transform: lowercase; + letter-spacing: 1px; + color: #828282; + } +} + +.top-rated img { + // height: 350px; + width: 100%; +} + +.con { + margin: 5px 30px; +} + + +// .bg-img { +// /* The image used */ +// background-image: url("https://res.cloudinary.com/elijjaaahhhh/image/upload/v1589667374/main_kgnuev.jpg"); + +// min-height: 80vh; + +// /* Center and scale the image nicely */ +// background-position: center; +// background-repeat: no-repeat; +// background-size: cover; + +// /* Needed to position the navbar */ +// position: relative; +// } + +// /* Position the navbar container inside the image */ +// .containe { +// position: absolute; +// margin: 20px; +// width: auto; +// } + +// /* The navbar */ +// .topnav { +// overflow: hidden; +// // background-color: #333; +// } + +// /* Navbar links */ +// .topnav a { +// // float: left; +// color: #f2f2f2; +// text-align: center; +// padding: 14px 16px; +// text-decoration: none; +// font-size: 17px; +// } + +// .topnav a:hover { +// background-color: #ddd; +// color: black; +// } \ No newline at end of file diff --git a/app/assets/stylesheets/welcome.scss b/app/assets/stylesheets/welcome.scss new file mode 100644 index 0000000..5042f7d --- /dev/null +++ b/app/assets/stylesheets/welcome.scss @@ -0,0 +1,3 @@ +// Place all the styles related to the welcome controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: https://sass-lang.com/ diff --git a/app/controllers/orders_controller.rb b/app/controllers/orders_controller.rb new file mode 100644 index 0000000..1f90d31 --- /dev/null +++ b/app/controllers/orders_controller.rb @@ -0,0 +1,15 @@ +class OrdersController < ApplicationController + def index + @orders = Order.all + # @order_item = current_order.order_items.new + end + + def show + @order = Order.find(params[:id]) + end + private + + def product_params + params.require(:order).permit(:title, :description, :price) + end +end diff --git a/app/controllers/welcome_controller.rb b/app/controllers/welcome_controller.rb new file mode 100644 index 0000000..300ec66 --- /dev/null +++ b/app/controllers/welcome_controller.rb @@ -0,0 +1,10 @@ +class WelcomeController < ApplicationController + def home + end + + def about_us + end + + def contact_us + end +end diff --git a/app/helpers/welcome_helper.rb b/app/helpers/welcome_helper.rb new file mode 100644 index 0000000..eeead45 --- /dev/null +++ b/app/helpers/welcome_helper.rb @@ -0,0 +1,2 @@ +module WelcomeHelper +end diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 7559d97..3ab8905 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -2,15 +2,35 @@ // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. -import 'bootstrap' +// import 'bootstrap' +import '../stylesheets/application' +import 'materialize-css/dist/js/materialize' + require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") - +require("jquery") // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) +$(document).on('turbolinks:load', function () { + $('.carousel').carousel({ + interval: 3000 + }) + + $('.sidenav').sidenav(); + + // $('.slider').slider(); + + $(".slider").slider({ + indicators: false, + height: 500, + transition: 500, + interval: 6000, + }); + +}); \ No newline at end of file diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss new file mode 100644 index 0000000..ef07096 --- /dev/null +++ b/app/javascript/stylesheets/application.scss @@ -0,0 +1 @@ +// @import 'materialize-css/dist/css/materialize'; \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 74828c5..06e2d19 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,15 +1,65 @@ - + + OnlineShop <%= csrf_meta_tags %> <%= csp_meta_tag %> + + + <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> - - - <%= yield %> - - + + <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> + <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> + + + + + + <% +=begin%> +
+
+ +
+ +
+ <% +=end%> + +
+ <%= yield %> +
+ + + + + \ No newline at end of file diff --git a/app/views/shared/_nav.html.erb b/app/views/shared/_nav.html.erb new file mode 100644 index 0000000..3adfb40 --- /dev/null +++ b/app/views/shared/_nav.html.erb @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/app/views/shops/index.html.erb b/app/views/shops/index.html.erb index 930f59a..87108c2 100644 --- a/app/views/shops/index.html.erb +++ b/app/views/shops/index.html.erb @@ -35,29 +35,4 @@
<%= render 'cart/cart' %> -
- - - - - \ No newline at end of file diff --git a/app/views/welcome/about_us.html.erb b/app/views/welcome/about_us.html.erb new file mode 100644 index 0000000..d3f2d63 --- /dev/null +++ b/app/views/welcome/about_us.html.erb @@ -0,0 +1 @@ +

about us

\ No newline at end of file diff --git a/app/views/welcome/contact_us.html.erb b/app/views/welcome/contact_us.html.erb new file mode 100644 index 0000000..02c0764 --- /dev/null +++ b/app/views/welcome/contact_us.html.erb @@ -0,0 +1 @@ +

contactus

\ No newline at end of file diff --git a/app/views/welcome/home.html.erb b/app/views/welcome/home.html.erb new file mode 100644 index 0000000..8ba5da8 --- /dev/null +++ b/app/views/welcome/home.html.erb @@ -0,0 +1,122 @@ +<% +=begin%> + +
+ +
+<% +=end%> +
+
+ <% +=begin%> +
+ Home + News + Contact + About +
+ <% +=end%> + +
+
+
+

Our Top Rated Product

+
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+
This div is 7-columns wide on pushed to the right by 5-columns.
+
+
+
+ +
+

Product Gallery

+
+ +
+
+ Muffin jelly gingerbread +
+
+
+
+ sesame snaps chocolate +
+
+
+
+ Oat cake +
+
+ +
+
+ Dragée pudding brownie +
+
+
+
+ Oat cake +
+
+ +
+
+ pudding cheesecake +
+
+ +
+
\ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb index 697dc88..4128146 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,9 +1,12 @@ Rails.application.routes.draw do + root 'welcome#home' + get 'about', to: 'welcome#about_us' + get 'contact', to: 'welcome#contact_us' get 'cart/show' resources :shops, only:[:index, :show] resources :products resources :order_items resource :carts, only:[:show] - root 'shops#index' + # root 'shops#index' # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html end diff --git a/config/webpack/environment.js b/config/webpack/environment.js index 7b0ba99..0515f2d 100644 --- a/config/webpack/environment.js +++ b/config/webpack/environment.js @@ -1,10 +1,17 @@ const { environment } = require('@rails/webpacker') +// const webpack = require('webpack') +// environment.plugins.append('Provide', +// new webpack.ProvidePlugin({ +// $: 'jquery', +// jQuery: 'jquery', +// Popper: ['popper.js', 'default'] +// }) +// ) const webpack = require('webpack') -environment.plugins.append('Provide', +environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ - $: 'jquery', - jQuery: 'jquery', - Popper: ['popper.js', 'default'] + $: 'jquery/src/jquery', + jQuery: 'jquery/src/jquery' }) ) module.exports = environment diff --git a/package.json b/package.json index f26449a..d722d59 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@rails/webpacker": "4.2.2", "bootstrap": "^4.5.0", "jquery": "^3.5.1", + "materialize-css": "^1.0.0", "popper.js": "^1.16.1", "turbolinks": "^5.2.0" }, diff --git a/test/controllers/welcome_controller_test.rb b/test/controllers/welcome_controller_test.rb new file mode 100644 index 0000000..a64edb2 --- /dev/null +++ b/test/controllers/welcome_controller_test.rb @@ -0,0 +1,9 @@ +require 'test_helper' + +class WelcomeControllerTest < ActionDispatch::IntegrationTest + test "should get home" do + get welcome_home_url + assert_response :success + end + +end diff --git a/yarn.lock b/yarn.lock index 3277ba8..7c32324 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4246,6 +4246,11 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" +materialize-css@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-1.0.0.tgz#8d5db1c4a81c6d65f3b2e2ca83a8e08daa24d1be" + integrity sha512-4/oecXl8y/1i8RDZvyvwAICyqwNoKU4or5uf8uoAd74k76KzZ0Llym4zhJ5lLNUskcqjO0AuMcvNyDkpz8Z6zw== + md5.js@^1.3.4: version "1.3.5" resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"