From e26660dddddf9d93cdfef2bed3972092b701134b Mon Sep 17 00:00:00 2001
From: "MKCLINDIA\\ronakp" <ronakp@mkcl.org>
Date: Mon, 2 Dec 2019 18:25:00 +0530
Subject: [PATCH] add ui to registration page
---
public/assets/styles/template.scss | 235 +++++++++++++++++++++++++++++
src/App.vue | 14 +-
src/views/I18Demo.vue | 48 +++++-
src/views/Login.vue | 2 +
4 files changed, 295 insertions(+), 4 deletions(-)
diff --git a/public/assets/styles/template.scss b/public/assets/styles/template.scss
index 9a9cc93..50cb164 100644
--- a/public/assets/styles/template.scss
+++ b/public/assets/styles/template.scss
@@ -473,6 +473,9 @@ textarea.form-control {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
+ &.page-login {margin-left: 0; padding-top: 0;
+ > .content {padding: 0;}
+ }
}
.page-wrapper>.content {
@@ -958,4 +961,236 @@ background-color: #01c0c8;
.timeline {
flex-direction: column;
}
+}
+
+
+
+
+.bg-purple {
+ background-image: linear-gradient(-225deg, #01c0c8 0%, #6B8DD6 48%, #8E37D7 100%);
+}
+
+.nav-link {
+ display: block;
+ padding: 1.5rem 1rem;
+}
+
+.welcome-area {
+ background: #fff;
+
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
+ padding: 20px;
+ margin-bottom: 30px;
+}
+
+.welcome-area h3 {
+ color: #36434d;
+ font-size: 23px;
+}
+
+.welcome-area p {
+ font-size: 16px;
+ color: #a09ea2;
+ margin: 0;
+}
+
+.carousel-wrapper {
+ margin-bottom: 50px;
+}
+
+.swiper-container {
+
+ width: 100%;
+}
+
+@media(min-width: 992px) {
+ .swiper-container {
+ height: auto;
+ }
+}
+
+.swiper-slide {
+ padding: 50px;
+ text-align: center;
+
+
+ /*background-color: #fff;*/
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.swiper-pagination-bullet-custom {
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ line-height: 20px;
+ font-size: 12px;
+ color: #000;
+ opacity: 1;
+ background: rgba(0, 0, 0, 0.2);
+}
+
+.swiper-pagination-bullet-custom.swiper-pagination-bullet-active {
+ color: #fff;
+ background: #007aff;
+}
+
+.menu-wrapper i {
+ font-size: 40px;
+ margin-bottom: 20px;
+
+
+}
+
+.menu-wrapper .row:first-child .col-6:nth-child(1) i {
+ color: #9055A2;
+}
+
+.menu-wrapper .row:first-child .col-6:nth-child(2) i {
+ color: #e8384d;
+}
+
+.menu-wrapper .row:first-child .col-6:nth-child(3) i {
+ color: #8CD790;
+}
+
+.menu-wrapper .row:first-child .col-6:nth-child(4) i {
+ color: #F68657;
+}
+
+.menu-wrapper .row:first-child .col-6:nth-child(5) i {
+ color: #2fd4e7;
+}
+
+.menu-wrapper .row:first-child .col-6:nth-child(6) i {
+ color: #0be881;
+}
+
+.menu-wrapper .row:last-child .col-6:nth-child(1) i {
+ color: #ffa801;
+}
+
+.menu-wrapper .row:last-child .col-6:nth-child(2) i {
+ color: #575fcf;
+}
+
+.menu-wrapper .row:last-child .col-6:nth-child(3) i {
+ color: #ff4d4d;
+}
+
+.menu-wrapper .row:last-child .col-6:nth-child(4) i {
+ color: #1e90ff;
+}
+
+.menu-wrapper .row:last-child .col-6:nth-child(5) i {
+ color: #f78fb3;
+}
+
+.menu-wrapper .row:last-child .col-6:nth-child(6) i {
+ color: #0097a7;
+}
+
+
+
+
+.menu-wrapper h3 {
+ font-size: 16px;
+ font-weight: 400;
+
+}
+
+.menu-link {
+ width: 100%;
+ height: 150px;
+ display: flex;
+ align-items: center;
+ padding: 20px;
+ margin-bottom: 30px;
+ border-radius: 6px;
+ border: 1px solid transparent;
+ box-shadow: 0 4px 9px 0 rgba(30, 59, 91, 0.1);
+ display: block;
+ background: #fff;
+ color: #333;
+ transition: all .2s ease-in;
+}
+
+.menu-link:hover {
+ background: #fff;
+ color: #333;
+ border: 1px solid #3afe;
+}
+
+.menu-card {
+ padding: 30px 40px;
+ border-radius: 6px;
+ background: #fff;
+ box-shadow: 0 4px 9px 0 rgba(30, 59, 91, 0.1);
+}
+
+.menu-card h3 {
+ text-align: center;
+ font-size: 18px;
+ margin: 0;
+}
+
+.menu-card img {
+ height: 100px;
+ display: block;
+ margin: auto;
+}
+
+.bg-blue {
+ background: #36A2EB;
+
+ color: #fff;
+}
+
+.bg-green {
+ background: #4BC0C0;
+ color: #fff;
+}
+
+.bg-red {
+ background: #FF6384;
+ color: #fff;
+}
+
+.bg-black {
+ /*background: #333538;*/
+ background: #5d7dad;
+ color: #fff;
+}
+
+.container {
+ max-width: 1200px;
+}
+
+.footer {
+ color: #fff;
+ background: #333538;
+ padding: 15px 0;
+
+}
+
+.footer p {
+ margin-bottom: 0;
+ text-align: center;
+
+}
+
+main {
+ padding: 0 0 60px;
+}
+@media(max-width: 425px){
+ .swiper-slide {
+ padding: 10px;
+ }
}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index c03b969..9e7a565 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
<div id="app-loader" v-if="$store.getters.isPageBlocked">
<img src="../public/assets/tail-spin.svg" alt="loader" />
</div>
- <div class="wrapper" v-if="$route.path !== '/theme'">
+ <div class="wrapper" v-if="$route.path == '/something'">
<div id="nav">
<router-link to="/">
<i class="mdi mdi-home" /> Home
@@ -45,7 +45,17 @@
</div>
<router-view />
</div>
- <div class="main-wrapper" v-if="$route.path == '/theme'">
+ <div
+ class="main-wrapper"
+ :class="{ 'page-login': $route.path == '/login' }"
+ v-if="$route.path == '/login' || $route.path == '/i18Demo'"
+ >
+ <router-view />
+ </div>
+ <div
+ class="main-wrapper"
+ v-if="$route.path !== '/login' && $route.path !== '/i18Demo'"
+ >
<headerbar></headerbar>
<sidebar></sidebar>
<div class="page-wrapper">
diff --git a/src/views/I18Demo.vue b/src/views/I18Demo.vue
index e15eb0f..37000a6 100644
--- a/src/views/I18Demo.vue
+++ b/src/views/I18Demo.vue
@@ -1,8 +1,43 @@
/* eslint-disable semi */
-/* eslint-disable semi */
-/* eslint-disable semi */
<template>
<div class="validator" id="app">
+ <b-navbar toggleable="lg" type="dark" variant="purple">
+ <div class="container-fluid">
+ <b-navbar-brand href="#">Digital University</b-navbar-brand>
+ <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+ <b-collapse id="nav-collapse" is-nav>
+ <b-navbar-nav>
+ <!-- <b-nav-item href="#">Link</b-nav-item>
+ <b-nav-item href="#" disabled>Disabled</b-nav-item> -->
+ </b-navbar-nav>
+ <!-- Right aligned nav items -->
+ <b-navbar-nav class="ml-auto">
+ <!-- <b-nav-form>
+ <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
+ <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
+ </b-nav-form>
+ <b-nav-item-dropdown text="Lang" right>
+ <b-dropdown-item href="#">EN</b-dropdown-item>
+ <b-dropdown-item href="#">ES</b-dropdown-item>
+ <b-dropdown-item href="#">RU</b-dropdown-item>
+ <b-dropdown-item href="#">FA</b-dropdown-item>
+ </b-nav-item-dropdown> -->
+ <b-nav-item-dropdown right>
+ <!-- Using 'button-content' slot -->
+ <template slot="button-content"><em>Prashant Savekar</em></template>
+ <b-dropdown-item href="#">Profile</b-dropdown-item>
+ <b-dropdown-item href="#">Sign Out</b-dropdown-item>
+ </b-nav-item-dropdown>
+ </b-navbar-nav>
+ </b-collapse>
+ </div>
+ </b-navbar>
+ <div class="welcome-area">
+ <div class="container">
+ <h3>Welcome Chhatrapati Shivaji Night College of Arts and Commerce ! </h3>
+ <p>You have logged in as College and your last logon was 6/15/2019 3:14:17 PM</p>
+ </div>
+ </div>
<form class="ui form" @submit.prevent="onSubmit" />
<div class="container">
<div class="row left-content-center text-left">
@@ -436,6 +471,15 @@
</div>
</div>
</div>
+ <footer class="footer">
+ <div class="container">
+ <div class="row">
+ <div class="col-lg-12">
+ <p>Copyright 2011. All Rights Reserved. Powered By (MKCL)</p>
+ </div>
+ </div>
+ </div>
+ </footer>
</div>
</template>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index c562d32..f467c4a 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -201,6 +201,7 @@
</div>
</section> -->
</template>
+
<script>
import Vue from 'vue'
import Response from '@/plugins/response.js'
@@ -300,6 +301,7 @@ export default {
}
}
</script>
+
<style lang="scss">
.login-2 {
background: #f5f5f5;
--
GitLab