Skip to content

Commit

Permalink
Adding question layout.
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrux
chrux committed Jul 22, 2019
1 parent efc37e7 commit 28ad71d
Show file tree
Hide file tree
Showing 6 changed files with 216 additions and 88 deletions.
5 changes: 5 additions & 0 deletions resources/sass/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ $body-bg: #f8fafc;
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
$enable-responsive-font-sizes: true;

// Colors
$blue: #3490dc;
Expand All @@ -17,3 +18,7 @@ $yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

$gray: #636b6f;
$lightGray: #d0d3d4;
$darkGray: #3c3c3c;
81 changes: 78 additions & 3 deletions resources/sass/app.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,83 @@
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url("https://fonts.googleapis.com/css?family=Nunito");

// Variables
@import 'variables';
@import "variables";

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import "~bootstrap/scss/bootstrap";

html,
body {
background-color: #fff;
color: $gray;
font-family: $font-family-sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}

.full-height {
height: 100vh;
}

.flex-center {
align-items: center;
display: flex;
justify-content: center;
}

.position-ref {
position: relative;
}

.top-right {
position: absolute;
right: 0px;
top: 0px;
}

.links {
padding: 16px;
> a {
color: $gray;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1rem;
text-decoration: none;
text-transform: uppercase;
}
}

.choices {
> .choice {
@include border-radius(4px);
border: 1px solid $gray;
padding: 4px;
cursor: pointer;
&:hover {
background-color: $lightGray;
}
> .key > span {
display: block;
margin-right: -15px;
margin-left: -15px;
@include border-radius(4px);
border: 1px solid $gray;
background-color: $lightGray;
text-align: center;
}
&.selected {
border: 2px solid $darkGray;
background-color: $lightGray;
> .key > span {
background-color: $darkGray;
color: #fff;
}
}
> .title {
@include rfs(18);
}
}
}
66 changes: 52 additions & 14 deletions resources/views/home.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,61 @@
@extends('layouts.app')

@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>

<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif

You are logged in!
@include('nav', ['class' => 'd-block d-sm-none text-right'])
<div class="flex-center position-ref full-height">
@include('nav', ['class' => 'd-none d-sm-block top-right'])
<div class="container">
<div class="row">
<div class="col">
<h1 class="display-4 text-center">
What's your favorite programming language?
</h1>
</div>
</div>
<div class="row">
<div class="col">
<p class="lead text-center">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
</div>
</div>
<div class="row">
<div class="col">
<div class="choices container-fluid">
<div class="choice row mt-2 mb-2">
<div class="key col-auto"><span>A</span></div>
<div class="title col">PHP</div>
<div class="check col-auto"></div>
</div>
<div class="choice row mt-2 mb-2">
<div class="key col-auto"><span>B</span></div>
<div class="title col">C#</div>
<div class="check col-auto"></div>
</div>
<div class="choice row mt-2 mb-2">
<div class="key col-auto"><span>C</span></div>
<div class="title col">Python</div>
<div class="check col-auto"></div>
</div>
<div class="choice selected row mt-2 mb-2">
<div class="key col-auto"><span>D</span></div>
<div class="title col">Javascript</div>
<div class="check col-auto"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
Please select one
</div>
</div>
<hr />
<div class="row">
<div class="col">
<button class="btn btn-primary btn-lg">Send</button>
</div>
</div>
</div>
</div>
@endsection
89 changes: 18 additions & 71 deletions resources/views/layouts/app.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,27 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>{{ config('app.name', 'Laravel') }}</title>
<title>{{ config('app.name', 'Laravel') }}</title>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>

<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">

</ul>

<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>

<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>

<main class="py-4">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
@yield('content')
</main>
</div>
</body>
</div>
</body>
</html>
50 changes: 50 additions & 0 deletions resources/views/layouts/nav.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">

</ul>

<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>

<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
13 changes: 13 additions & 0 deletions resources/views/nav.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@if (Route::has('login'))
<div class="{{ $class }} links">
@auth
<a href="{{ url('/home') }}">Home</a>
@else
<a href="{{ route('login') }}">Login</a>

@if (Route::has('register'))
<a href="{{ route('register') }}">Register</a>
@endif
@endauth
</div>
@endif

0 comments on commit 28ad71d

Please sign in to comment.