Update installer design

rashidlaasri · Dec 2, 2015 · 5b87dd9 · 5b87dd9
1 parent bb890c0
commit 5b87dd9
Show file tree

Hide file tree

Showing 24 changed files with 2,975 additions and 292 deletions.
diff --git a/src/Views/database.blade.php b/src/Views/database.blade.php
diff --git a/src/Views/environment.blade.php b/src/Views/environment.blade.php
@@ -1,33 +1,22 @@
 @extends('vendor.installer.layouts.master')
 
+@section('title', trans('messages.environment.title'))
 @section('container')
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">
-                <i class="glyphicon glyphicon-file"></i>
-                {{ trans('messages.environment.title') }}
-            </h3>
-        </div>
-        <div class="panel-body">
-            @if (session('message'))
-                <div class="alert alert-warning">
-                    {{ session('message') }}
-                </div>
-            @endif
-            <form method="post" action="{{ route('LaravelInstaller::environmentSave') }}">
-                <div class="bs-component">
-                    <ul class="list-group">
-                        <textarea name="envConfig" rows="10">{{ $envConfig }}</textarea>
-                    </ul>
-                </div>
-                @if(!isset($environment['errors']))
-                    <a class="btn btn-success" href="{{ route('LaravelInstaller::requirements') }}">
-                        {{ trans('messages.next') }}
-                    </a>
-                @endif
-                {!! csrf_field() !!}
-                <input type="submit" class="btn btn-info" style="float: right;" value="{{ trans('messages.environment.save') }}">
-            </form>
+    @if (session('message'))
+    <p class="alert">{{ session('message') }}</p>
+    @endif
+    <form method="post" action="{{ route('LaravelInstaller::environmentSave') }}">
+        <textarea class="textarea" name="envConfig">{{ $envConfig }}</textarea>
+        {!! csrf_field() !!}
+        <div class="buttons buttons--right">
+             <button class="button button--light" type="submit">{{ trans('messages.environment.save') }}</button>
         </div>
+    </form>
+    @if(!isset($environment['errors']))
+    <div class="buttons">
+        <a class="button" href="{{ route('LaravelInstaller::requirements') }}">
+            {{ trans('messages.next') }}
+        </a>
     </div>
+    @endif
 @stop
diff --git a/src/Views/finished.blade.php b/src/Views/finished.blade.php
@@ -1,20 +1,9 @@
 @extends('vendor.installer.layouts.master')
 
+@section('title', trans('messages.final.title'))
 @section('container')
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">
-                <i class="glyphicon glyphicon-home"></i>
-                {{ trans('messages.final.title') }}
-            </h3>
-        </div>
-        <div class="panel-body">
-            <div class="alert alert-{{ session('message')['status'] }}">
-                {{ session('message')['message'] }}
-            </div>
-            <a class="btn btn-success" href="/">
-                {{ trans('messages.final.exit') }}
-            </a>
-        </div>
+    <p class="paragraph">{{ session('message')['message'] }}</p>
+    <div class="buttons">
+        <a href="/" class="button">{{ trans('messages.final.exit') }}</a>
     </div>
 @stop
diff --git a/src/Views/layouts/master.blade.php b/src/Views/layouts/master.blade.php
@@ -1,35 +1,37 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
+<html>
+  <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ trans('messages.title') }}</title>
-
-    <!-- Bootstrap -->
-    <link href="http://bootswatch.com/flatly/bootstrap.min.css" rel="stylesheet">
-
-    <!-- Main Style -->
-    <link href="{{ asset('installer/css/main.css') }}" rel="stylesheet">
-
-    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-    <!--[if lt IE 9]>
-    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
-    <![endif]-->
-</head>
-<body>
-
-<div class="container">
-    <div class="login-body">
-        <article class="container-login center-block">
-            <section>
-                @yield('container')
-            </section>
-        </article>
+    <link rel="icon" type="image/png" href="{{ asset('installer/img/favicon/favicon-16x16.png') }}" sizes="16x16"/>
+    <link rel="icon" type="image/png" href="{{ asset('installer/img/favicon/favicon-32x32.png') }}" sizes="32x32"/>
+    <link rel="icon" type="image/png" href="{{ asset('installer/img/favicon/favicon-96x96.png') }}" sizes="96x96"/>
+    <link href="{{ asset('installer/css/style.min.css') }}" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="master">
+      <div class="box">
+        <div class="header">
+            <h1 class="header__title">@yield('title')</h1>
+        </div>
+        <ul class="step">
+          <li class="step__divider"></li>
+          <li class="step__item {{ isActive('LaravelInstaller::final') }}"><i class="step__icon database"></i></li>
+          <li class="step__divider"></li>
+          <li class="step__item {{ isActive('LaravelInstaller::permissions') }}"><i class="step__icon permissions"></i></li>
+          <li class="step__divider"></li>
+          <li class="step__item {{ isActive('LaravelInstaller::requirements') }}"><i class="step__icon requirements"></i></li>
+          <li class="step__divider"></li>
+          <li class="step__item {{ isActive('LaravelInstaller::environment') }}"><i class="step__icon update"></i></li>
+          <li class="step__divider"></li>
+          <li class="step__item {{ isActive('LaravelInstaller::welcome') }}"><i class="step__icon welcome"></i></li>
+          <li class="step__divider"></li>
+        </ul>
+        <div class="main">
+          @yield('container')
+        </div>
+      </div>
     </div>
-</div>
-
-</body>
-</html>
+  </body>
+</html>
diff --git a/src/Views/permissions.blade.php b/src/Views/permissions.blade.php
@@ -1,37 +1,22 @@
 @extends('vendor.installer.layouts.master')
 
+@section('title', trans('messages.permissions.title'))
 @section('container')
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">
-                <i class="glyphicon glyphicon-file"></i>
-                {{ trans('messages.permissions.title') }}
-            </h3>
-        </div>
-        <div class="panel-body">
-            <div class="bs-component">
-                <ul class="list-group">
-                    @foreach($permissions['permissions'] as $permission)
-                        <li class="list-group-item">
-                            @if($permission['isSet'])
-                                <span class="badge badge-success">
-                                    {{ $permission['permission'] }}
-                                </span>
-                            @else
-                                <span class="badge badge-danger">
-                                    {{ $permission['permission'] }}
-                                </span>
-                            @endif
-                            {{ $permission['folder'] }}
-                        </li>
-                    @endforeach
-                </ul>
-            </div>
-            @if(!isset($permissions['errors']))
-                <a class="btn btn-success" href="{{ route('LaravelInstaller::database') }}">
-                    {{ trans('messages.next') }}
-                </a>
-            @endif
-        </div>
-    </div>
+
+<ul class="list">
+    @foreach($permissions['permissions'] as $permission)
+    <li class="list__item list__item--permissions @if($permission['isSet']) success @else error @endif">
+        {{ $permission['folder'] }}<span>{{ $permission['permission'] }}</span>
+        </li>
+    @endforeach
+</ul>
+
+@if(!isset($permissions['errors']))
+<div class="buttons">
+    <a class="button" href="{{ route('LaravelInstaller::database') }}">
+        {{ trans('messages.next') }}
+    </a>
+</div>
+@endif
+
 @stop
diff --git a/src/Views/requirements.blade.php b/src/Views/requirements.blade.php
@@ -1,37 +1,20 @@
 @extends('vendor.installer.layouts.master')
 
+@section('title', trans('messages.requirements.title'))
 @section('container')
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">
-                <i class="glyphicon glyphicon-exclamation-sign"></i>
-                {{ trans('messages.requirements.title') }}
-            </h3>
-        </div>
-        <div class="panel-body">
-            <div class="bs-component">
-                <ul class="list-group">
-                    @foreach($requirements['requirements'] as $element => $enabled)
-                    <li class="list-group-item">
-                        @if($enabled)
-                            <span class="badge badge-success">
-                                <i class="glyphicon glyphicon-ok"></i>
-                            </span>
-                        @else
-                            <span class="badge badge-danger">
-                                <i class="glyphicon glyphicon-remove"></i>
-                            </span>
-                        @endif
-                        {{ $element }}
-                    </li>
-                    @endforeach
-                </ul>
-            </div>
-            @if(!isset($requirements['errors']))
-                <a class="btn btn-success" href="{{ route('LaravelInstaller::permissions') }}">
-                    {{ trans('messages.next') }}
-                </a>
-            @endif
-        </div>
+
+<ul class="list">
+    @foreach($requirements['requirements'] as $extention => $enabled)
+    <li class="list__item @if($enabled) success @else error @endif">{{ $extention }}</li>
+    @endforeach
+</ul>
+
+@if(!isset($requirements['errors']))
+    <div class="buttons">
+        <a class="button" href="{{ route('LaravelInstaller::permissions') }}">
+        {{ trans('messages.next') }}
+        </a>
     </div>
+@endif
+
 @stop
diff --git a/src/Views/welcome.blade.php b/src/Views/welcome.blade.php
@@ -1,20 +1,9 @@
 @extends('vendor.installer.layouts.master')
 
+@section('title', trans('messages.welcome.title'))
 @section('container')
-    <div class="panel panel-success">
-        <div class="panel-heading">
-            <h3 class="panel-title">
-                <i class="glyphicon glyphicon-home"></i>
-                {{ trans('messages.welcome.title') }}
-            </h3>
-        </div>
-        <div class="panel-body">
-            <p>
-                {{ trans('messages.welcome.message') }}
-            </p>
-            <a class="btn btn-success" href="{{ route('LaravelInstaller::environment') }}">
-                {{ trans('messages.next') }}
-            </a>
-        </div>
+    <p class="paragraph">{{ trans('messages.welcome.message') }}</p>
+    <div class="buttons">
+        <a href="{{ route('LaravelInstaller::environment') }}" class="button">{{ trans('messages.next') }}</a>
     </div>
 @stop