viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 6566e8f2919d5b05a5b8f55a53881b9af6810b99

Authored by Neeraj Sharma
1 parent beb5985361
Exists in master and in 3 other branches amber-development, development, ui-design

design and functionality add api add News,edit News,view News, delete News in News page

Showing 1 changed file with 872 additions and 0 deletions   Show diff stats
src/pages/News/news.vue
Diff comments   View file @6566e8f
... ... @@ -0,0 +1,872 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <v-toolbar class="fixcolors" fixed app>
  4 + <v-toolbar-title class="ml-0 pl-3">
  5 + <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
  6 + </v-toolbar-title>
  7 + <!-- ****** SEARCH ALL EXISTING NEWS ****** -->
  8 + <v-flex xs7 sm3 class="userSearch">
  9 + <v-text-field
  10 + flat
  11 + append-icon="search"
  12 + label="Find your Teachers"
  13 + v-model="search"
  14 + color="white"
  15 + dark
  16 + ></v-text-field>
  17 + </v-flex>
  18 + <v-spacer></v-spacer>
  19 + <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
  20 + <v-btn icon large flat slot="activator">
  21 + <v-avatar size="40px">
  22 + <img src="/static/icon/user.png">
  23 + </v-avatar>
  24 + </v-btn>
  25 + <v-list class="pa-0">
  26 + <v-list-tile
  27 + v-for="(item,index) in items"
  28 + :to="!item.href ? { name: item.name } : null"
  29 + :href="item.href"
  30 + @click="item.click"
  31 + ripple="ripple"
  32 + :disabled="item.disabled"
  33 + :target="item.target"
  34 + rel="noopener"
  35 + :key="index"
  36 + >
  37 + <v-list-tile-action v-if="item.icon">
  38 + <v-icon>{{ item.icon }}</v-icon>
  39 + </v-list-tile-action>
  40 + <v-list-tile-content>
  41 + <v-list-tile-title>{{ item.title }}</v-list-tile-title>
  42 + </v-list-tile-content>
  43 + </v-list-tile>
  44 + </v-list>
  45 + </v-menu>
  46 + </v-toolbar>
  47 + <v-tabs grow slider-color="black">
  48 + <v-tab
  49 + ripple
  50 + @click="activeTab('existing')"
  51 + v-bind:class="{ active: isActive }"
  52 + id="tab"
  53 + class="subheading"
  54 + >Existing News</v-tab>
  55 + <v-tab
  56 + ripple
  57 + @click="activeTab('new')"
  58 + v-bind:class="{ active: newActive }"
  59 + id="tab1"
  60 + User
  61 + class="subheading"
  62 + >Add News</v-tab>
  63 +
  64 + <!-- ****** EDITS ALL NEWS DETAILS ****** -->
  65 +
  66 + <v-tab-item>
  67 + <v-snackbar
  68 + :timeout="timeout"
  69 + :top="y === 'top'"
  70 + :right="x === 'right'"
  71 + :vertical="mode === 'vertical'"
  72 + v-model="snackbar"
  73 + color="success"
  74 + >{{ text }}</v-snackbar>
  75 + <v-dialog v-model="dialog" max-width="1000px">
  76 + <v-flex xs12 sm12 class>
  77 + <v-toolbar color="white">
  78 + <v-spacer></v-spacer>
  79 + <v-toolbar-title>Edit Profile</v-toolbar-title>
  80 + <v-spacer></v-spacer>
  81 + </v-toolbar>
  82 + <v-card flat>
  83 + <v-form ref="form">
  84 + <v-container fluid>
  85 + <v-layout>
  86 + <v-flex
  87 + xs12
  88 + class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
  89 + >
  90 + <v-avatar size="100px">
  91 + <img src="/static/icon/user.png" v-if="!imageUrl">
  92 + </v-avatar>
  93 + <input
  94 + type="file"
  95 + style="display: none"
  96 + ref="image"
  97 + accept="image/*"
  98 + @change="onFilePicked"
  99 + >
  100 + <img
  101 + :src="imageData.imageUrl"
  102 + height="150"
  103 + v-if="imageUrl"
  104 + style="border-radius:50%; width:200px"
  105 + >
  106 + </v-flex>
  107 + </v-layout>
  108 + <v-layout>
  109 + <v-flex xs12 sm6>
  110 + <v-layout>
  111 + <v-flex xs4 class="pt-4 subheading">
  112 + <label class="right">Select Class:</label>
  113 + </v-flex>
  114 + <v-flex xs8 class="ml-3">
  115 + <v-select
  116 + :items="addclass"
  117 + label="Select Class"
  118 + v-model="editedItem.select"
  119 + item-text="classNum"
  120 + item-value="_id"
  121 + name="Select Class"
  122 + @change="getSections(editedItem.select)"
  123 + required
  124 + ></v-select>
  125 + </v-flex>
  126 + </v-layout>
  127 + </v-flex>
  128 + <v-flex xs12 sm6>
  129 + <v-layout>
  130 + <v-flex xs4 class="pt-4 subheading">
  131 + <label class="right">Select Section:</label>
  132 + </v-flex>
  133 + <v-flex xs8 class="ml-3">
  134 + <v-select
  135 + :items="addSection"
  136 + label="Select Section"
  137 + v-model="editedItem.selectSection"
  138 + item-text="name"
  139 + item-value="_id"
  140 + name="Select Section"
  141 + required
  142 + ></v-select>
  143 + </v-flex>
  144 + </v-layout>
  145 + </v-flex>
  146 + </v-layout>
  147 + <v-layout>
  148 + <v-flex xs12 sm6>
  149 + <v-layout>
  150 + <v-flex xs4 class="pt-4 subheading">
  151 + <label class="right">Title:</label>
  152 + </v-flex>
  153 + <v-flex xs8 class="ml-3">
  154 + <v-text-field
  155 + v-model="editedItem.title"
  156 + placeholder="fill your Title"
  157 + name="name"
  158 + type="text"
  159 + required
  160 + ></v-text-field>
  161 + </v-flex>
  162 + </v-layout>
  163 + </v-flex>
  164 + <v-flex xs12 sm6>
  165 + <v-layout>
  166 + <v-flex xs4 class="pt-4 subheading">
  167 + <label class="right">Description:</label>
  168 + </v-flex>
  169 + <v-flex xs8 class="ml-3">
  170 + <v-text-field
  171 + placeholder="fill your Description"
  172 + v-model="editedItem.description"
  173 + type="text"
  174 + name="email"
  175 + required
  176 + ></v-text-field>
  177 + </v-flex>
  178 + </v-layout>
  179 + </v-flex>
  180 + </v-layout>
  181 + <v-layout>
  182 + <v-flex xs12 sm12>
  183 + <v-card-actions>
  184 + <v-btn round dark @click.native="close">Cancel</v-btn>
  185 + <v-spacer></v-spacer>
  186 + <v-btn round dark @click="save">Save</v-btn>
  187 + </v-card-actions>
  188 + </v-flex>
  189 + </v-layout>
  190 + </v-container>
  191 + </v-form>
  192 + </v-card>
  193 + </v-flex>
  194 + </v-dialog>
  195 +
  196 + <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
  197 + <v-dialog v-model="dialog1" max-width="600px">
  198 + <v-toolbar color="white">
  199 + <v-spacer></v-spacer>
  200 + <v-toolbar-title>Profile</v-toolbar-title>
  201 + <v-spacer></v-spacer>
  202 + <v-icon @click="close1">close</v-icon>
  203 + </v-toolbar>
  204 + <v-card>
  205 + <v-flex align-center justify-center layout text-xs-center>
  206 + <v-avatar size="50px" style="position:absolute; top:20px;">
  207 + <img src="/static/icon/user.png">
  208 + </v-avatar>
  209 + </v-flex>
  210 + <v-card-text>
  211 + <v-container grid-list-md>
  212 + <v-layout wrap>
  213 + <v-flex>
  214 + <br>
  215 + <br>
  216 + <v-layout>
  217 + <v-flex xs5 sm6>
  218 + <h5 class="right my-1">Title:</h5>
  219 + </v-flex>
  220 + <v-flex sm6 xs8>
  221 + <h5 class="my-1">{{ editedItem.title }}</h5>
  222 + </v-flex>
  223 + </v-layout>
  224 + <v-layout>
  225 + <v-flex xs5 sm6>
  226 + <h5 class="right my-1">Description:</h5>
  227 + </v-flex>
  228 + <v-flex sm6 xs8>
  229 + <h5 class="my-1">{{ editedItem.description }}</h5>
  230 + </v-flex>
  231 + </v-layout>
  232 + </v-flex>
  233 + </v-layout>
  234 + </v-container>
  235 + </v-card-text>
  236 + </v-card>
  237 + </v-dialog>
  238 +
  239 + <v-snackbar
  240 + :timeout="timeout"
  241 + :top="y === 'top'"
  242 + :right="x === 'right'"
  243 + :vertical="mode === 'vertical'"
  244 + v-model="snackbar"
  245 + color="success"
  246 + >{{ text }}</v-snackbar>
  247 +
  248 + <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
  249 + <v-data-table
  250 + :headers="headers"
  251 + :items="desserts"
  252 + :pagination.sync="pagination"
  253 + :search="search"
  254 + >
  255 + <template slot="items" slot-scope="props">
  256 + <td id="td" class="text-xs-center">{{ props.index}}</td>
  257 + <td id="td" class="text-xs-center">{{ props.item.title}}</td>
  258 + <td id="td" class="text-xs-center">{{ props.item.description}}</td>
  259 +
  260 + <td class="text-xs-center">
  261 + <span>
  262 + <img
  263 + style="cursor:pointer; width:25px; height:18px; "
  264 + class="mr-5"
  265 + @click="profile(props.item)"
  266 + src="/static/icon/eye1.png"
  267 + >
  268 + <img
  269 + style="cursor:pointer; width:20px; height:18px; "
  270 + class="mr-5"
  271 + @click="editItem(props.item)"
  272 + src="/static/icon/edit1.png"
  273 + >
  274 + <img
  275 + style="cursor:pointer; height:20px; "
  276 + class="mr-5"
  277 + @click="deleteItem(props.item)"
  278 + src="/static/icon/delete1.png"
  279 + >
  280 + </span>
  281 + </td>
  282 + </template>
  283 + <v-alert
  284 + slot="no-results"
  285 + :value="true"
  286 + color="error"
  287 + icon="warning"
  288 + >Your search for "{{ search }}" found no results.</v-alert>
  289 + </v-data-table>
  290 + </v-tab-item>
  291 +
  292 + <!-- ****** ADD MULTIPLE NEWS ****** -->
  293 +
  294 + <v-tab-item>
  295 + <v-container>
  296 + <v-snackbar
  297 + :timeout="timeout"
  298 + :top="y === 'top'"
  299 + :right="x === 'right'"
  300 + :vertical="mode === 'vertical'"
  301 + v-model="snackbar"
  302 + color="success"
  303 + >{{ text }}</v-snackbar>
  304 + <v-flex xs12 sm12 class="my-4">
  305 + <v-card flat>
  306 + <v-form ref="form" v-model="valid" lazy-validation>
  307 + <v-container fluid>
  308 + <v-layout>
  309 + <v-flex
  310 + xs12
  311 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  312 + >
  313 + <v-avatar size="100px">
  314 + <img src="/static/icon/user.png" v-if="!imageUrl">
  315 + </v-avatar>
  316 + <input
  317 + type="file"
  318 + style="display: none"
  319 + ref="image"
  320 + accept="image/*"
  321 + @change="onFilePicked"
  322 + >
  323 + <img
  324 + :src="imageData.imageUrl"
  325 + height="150"
  326 + v-if="imageUrl"
  327 + style="border-radius:50%; width:200px"
  328 + >
  329 + </v-flex>
  330 + </v-layout>
  331 + <v-flex xs12>
  332 + <v-layout>
  333 + <v-flex xs4 class="pt-4 subheading">
  334 + <label class="right">Select Class:</label>
  335 + </v-flex>
  336 + <v-flex xs4 class="ml-3">
  337 + <v-select
  338 + :items="addclass"
  339 + label="Select Class"
  340 + v-model="editedItem.select"
  341 + item-text="classNum"
  342 + item-value="_id"
  343 + name="Select Class"
  344 + @change="getSections(editedItem.select)"
  345 + required
  346 + ></v-select>
  347 + </v-flex>
  348 + </v-layout>
  349 + </v-flex>
  350 + <v-flex xs12>
  351 + <v-layout>
  352 + <v-flex xs4 class="pt-4 subheading">
  353 + <label class="right">Select Section:</label>
  354 + </v-flex>
  355 + <v-flex xs4 class="ml-3">
  356 + <v-select
  357 + :items="addSection"
  358 + label="Select Section"
  359 + v-model="editedItem.selectSection"
  360 + item-text="name"
  361 + item-value="_id"
  362 + name="Select Section"
  363 + required
  364 + ></v-select>
  365 + </v-flex>
  366 + </v-layout>
  367 + </v-flex>
  368 + <v-flex xs12>
  369 + <v-layout>
  370 + <v-flex xs4 class="pt-4 subheading">
  371 + <label class="right">Title:</label>
  372 + </v-flex>
  373 + <v-flex xs4 class="ml-3">
  374 + <v-text-field
  375 + v-model="addNews.title"
  376 + placeholder="fill your Title"
  377 + name="name"
  378 + type="text"
  379 + :rules="titleRules"
  380 + required
  381 + ></v-text-field>
  382 + </v-flex>
  383 + </v-layout>
  384 + </v-flex>
  385 + <v-flex xs12>
  386 + <v-layout>
  387 + <v-flex xs4 class="pt-4 subheading">
  388 + <label class="right">Description:</label>
  389 + </v-flex>
  390 + <v-flex xs4 class="ml-3">
  391 + <v-text-field
  392 + placeholder="fill your Description"
  393 + :rules="descriptionRules"
  394 + v-model="addNews.description"
  395 + type="text"
  396 + name="email"
  397 + required
  398 + ></v-text-field>
  399 + </v-flex>
  400 + </v-layout>
  401 + </v-flex>
  402 + <v-layout>
  403 + <v-flex xs12 sm6 offset-sm3>
  404 + <v-card-actions>
  405 + <v-btn @click="clear" round dark>clear</v-btn>
  406 + <v-spacer></v-spacer>
  407 + <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
  408 + </v-card-actions>
  409 + </v-flex>
  410 + </v-layout>
  411 + </v-container>
  412 + </v-form>
  413 + </v-card>
  414 + </v-flex>
  415 + </v-container>
  416 + </v-tab-item>
  417 + </v-tabs>
  418 + </v-app>
  419 +</template>
  420 +
  421 +<script>
  422 +import http from "@/Services/http.js";
  423 +import Util from "@/util";
  424 +
  425 +export default {
  426 + data: () => ({
  427 + snackbar: false,
  428 + y: "top",
  429 + x: "right",
  430 + mode: "",
  431 + timeout: 3000,
  432 + text: "",
  433 + loading: false,
  434 + date: null,
  435 + search: "",
  436 + menu: false,
  437 + menu1: false,
  438 + dialog: false,
  439 + dialog1: false,
  440 + valid: true,
  441 + isActive: true,
  442 + newActive: false,
  443 + addclass: [],
  444 + addSection: [],
  445 + gender: ["Male", "Female"],
  446 + AddUsercredentials: {},
  447 + pagination: {
  448 + rowsPerPage: 15
  449 + },
  450 + imageData: {},
  451 + imageName: "",
  452 + imageUrl: "",
  453 + imageFile: "",
  454 + titleRules: [v => !!v || " Tilte is required"],
  455 + descriptionRules: [v => !!v || " Description is required"],
  456 + headers: [
  457 + {
  458 + text: "No",
  459 + align: "center",
  460 + sortable: false,
  461 + value: "No"
  462 + },
  463 + { text: "Title", value: "title", sortable: false, align: "center" },
  464 + // { text: "Email", value: "email", sortable: false, align: "center" },
  465 + { text: "Description", value: "description", sortable: false, align: "center" },
  466 + { text: "Action", value: "", sortable: false, align: "center" }
  467 + ],
  468 + desserts: [],
  469 + editedIndex: -1,
  470 + addNews: {
  471 + title: "",
  472 + description: ""
  473 + },
  474 + editedItem: {
  475 + title: "",
  476 + description: ""
  477 + },
  478 + defaultItem: {
  479 + title: "",
  480 + description: ""
  481 + },
  482 + userName: "",
  483 + items: [
  484 + {
  485 + href: "/changepassword",
  486 + title: "Change Password",
  487 + click: e => {
  488 + console.log(e);
  489 + }
  490 + },
  491 + {
  492 + href: "#",
  493 + title: "Logout",
  494 + click: e => {
  495 + window.getApp.$emit("APP_LOGOUT");
  496 + }
  497 + }
  498 + ]
  499 + }),
  500 + watch: {
  501 + menu(val) {
  502 + val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
  503 + },
  504 + menu1(val) {
  505 + val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
  506 + }
  507 + },
  508 + methods: {
  509 + getSections(_id) {
  510 + var token = this.$store.state.token;
  511 + http()
  512 + .get(
  513 + "/getSectionsList",
  514 + { params: { classId: _id } },
  515 + {
  516 + headers: { Authorization: "Bearer " + token }
  517 + }
  518 + )
  519 + .then(response => {
  520 + this.addSection = response.data.data;
  521 + // console.log("getSectionsList=====>", this.addSection);
  522 + })
  523 + .catch(err => {
  524 + // console.log("err====>", err);
  525 + // this.$router.replace({ path: '/' });
  526 + });
  527 + },
  528 + pickFile() {
  529 + this.$refs.image.click();
  530 + },
  531 +
  532 + onFilePicked(e) {
  533 + // console.log(e)
  534 + const files = e.target.files;
  535 + this.imageData.upload = e.target.files[0];
  536 + if (files[0] !== undefined) {
  537 + this.imageName = files[0].name;
  538 + if (this.imageName.lastIndexOf(".") <= 0) {
  539 + return;
  540 + }
  541 + const fr = new FileReader();
  542 + fr.readAsDataURL(files[0]);
  543 + fr.addEventListener("load", () => {
  544 + this.imageUrl = fr.result;
  545 + this.imageFile = files[0]; // this is an image file that can be sent to server...
  546 + this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
  547 + console.log("upload=======>", this.imageData.imageUrl);
  548 + console.log("imageFile", this.imageFile);
  549 + });
  550 + } else {
  551 + this.imageName = "";
  552 + this.imageFile = "";
  553 + this.imageUrl = "";
  554 + }
  555 + },
  556 + getNewsList() {
  557 + var token = this.$store.state.token;
  558 + http()
  559 + .get("/getNewsList", {
  560 + headers: { Authorization: "Bearer " + token }
  561 + })
  562 + .then(response => {
  563 + this.desserts = response.data.data;
  564 + // console.log("getNewsList=====>",this.desserts)
  565 + })
  566 + .catch(err => {
  567 + // console.log("err====>", err);
  568 + this.$router.replace({ path: "/" });
  569 + });
  570 + },
  571 + editItem(item) {
  572 + this.editedIndex = this.desserts.indexOf(item);
  573 + this.editedItem = Object.assign({}, item);
  574 + this.dialog = true;
  575 + },
  576 + profile(item) {
  577 + this.editedIndex = this.desserts.indexOf(item);
  578 + this.editedItem = Object.assign({}, item);
  579 + this.dialog1 = true;
  580 + },
  581 + // report(item) {
  582 + // this.editedIndex = this.desserts.indexOf(item);
  583 + // this.editedItem = Object.assign({}, item);
  584 + // this.dialog2 = true;
  585 + // },
  586 +
  587 + deleteItem(item) {
  588 + let deleteNews = {
  589 + newsId: item._id
  590 + };
  591 + http()
  592 + .delete(
  593 + "/deleteNews",
  594 + confirm("Are you sure you want to delete this?") && {
  595 + params: deleteNews
  596 + }
  597 + )
  598 + .then(response => {
  599 + // console.log("deleteNews",deleteNews)
  600 + if ((this.snackbar = true)) {
  601 + this.text = "Successfully delete Existing User";
  602 + }
  603 + this.getNewsList();
  604 + })
  605 + .catch(error => {
  606 + // console.log(error);
  607 + });
  608 + },
  609 + activeTab(type) {
  610 + switch (type) {
  611 + case "existing":
  612 + this.newActive = false;
  613 + this.isActive = true;
  614 + break;
  615 +
  616 + default:
  617 + this.newActive = true;
  618 + this.isActive = false;
  619 + break;
  620 + }
  621 + },
  622 + close() {
  623 + this.dialog = false;
  624 + setTimeout(() => {
  625 + this.editedItem = Object.assign({}, this.defaultItem);
  626 + this.editedIndex = -1;
  627 + }, 300);
  628 + },
  629 + close1() {
  630 + this.dialog1 = false;
  631 + },
  632 + // close2() {
  633 + // this.dialog2 = false;
  634 + // },
  635 + submit() {
  636 + if (this.$refs.form.validate()) {
  637 + let imageData = new FormData();
  638 + imageData.append("upload", this.imageFile);
  639 + console.log(imageData);
  640 + let addNewses = {
  641 + title: this.addNews.title,
  642 + description: this.addNews.description,
  643 + // imageData
  644 + };
  645 + http()
  646 + .post("/createNews", addNewses)
  647 + .then(response => {
  648 + // console.log(addNewses)
  649 + if ((this.snackbar = true)) {
  650 + this.text = "New user added successfully";
  651 + }
  652 + this.getNewsList();
  653 + this.clear();
  654 + })
  655 + .catch(error => {
  656 + // console.log(error);
  657 + if ((this.snackbar = true)) {
  658 + this.text = error.response.data.message;
  659 + }
  660 + });
  661 + }
  662 + },
  663 + mail() {},
  664 + download() {},
  665 + clear() {
  666 + this.$refs.form.reset();
  667 + },
  668 + save() {
  669 + let imageData = new FormData();
  670 + imageData.append("upload", this.imageFile);
  671 + console.log(imageData);
  672 + let editNews = {
  673 + newsId: this.editedItem._id,
  674 + title: this.editedItem.title,
  675 + description: this.editedItem.description,
  676 + // imageData
  677 + };
  678 + http()
  679 + .put("/updateNews", editNews)
  680 + .then(response => {
  681 + // console.log("updateNews",updateNews);
  682 + if ((this.snackbar = true)) {
  683 + this.text = "Successfully Edit Existing User";
  684 + }
  685 + this.getNewsList();
  686 + })
  687 + .catch(error => {
  688 + // console.log(error);
  689 + });
  690 + this.close();
  691 + },
  692 + handleDrawerToggle() {
  693 + window.getApp.$emit("APP_DRAWER_TOGGLED");
  694 + },
  695 + handleFullScreen() {
  696 + Util.toggleFullScreen();
  697 + }
  698 + },
  699 + mounted() {
  700 + this.getNewsList();
  701 + var token = this.$store.state.token;
  702 + http()
  703 + .get("/getClassesList", {
  704 + headers: { Authorization: "Bearer " + token }
  705 + })
  706 + .then(response => {
  707 + this.addclass = response.data.data;
  708 + // console.log("getClassesList=====>",this.addclass)
  709 + })
  710 + .catch(err => {
  711 + // console.log("err====>", err);
  712 + this.$router.replace({ path: "/" });
  713 + });
  714 + },
  715 +
  716 + // console.log("Id",this.$store.state.id)
  717 + // console.log("token",this.$store.state.token)
  718 + computed: {
  719 + toolbarColor() {
  720 + return this.$vuetify.options.extra.mainNav;
  721 + }
  722 + }
  723 +};
  724 +</script>
  725 +<style scoped>
  726 +.v-tabs__div {
  727 + text-transform: none;
  728 +}
  729 +.v-input__prepend-outer {
  730 + margin-right: 0px !important;
  731 +}
  732 +.v-card__actions .v-btn {
  733 + margin: 0 15px;
  734 + min-width: 120px;
  735 +}
  736 +.primary {
  737 + background-color: #aaa !important;
  738 + border-color: #aaa !important;
  739 +}
  740 +h4 {
  741 + background-repeat: no-repeat;
  742 + padding: 8px;
  743 + margin: auto;
  744 + font-size: 25px;
  745 +}
  746 +#name {
  747 + position: absolute;
  748 + left: 100px;
  749 + top: 17px;
  750 +}
  751 +#icon {
  752 + position: absolute;
  753 + right: 8px;
  754 + top: 8px;
  755 +}
  756 +#m {
  757 + position: relative;
  758 + left: 135px;
  759 + top: -15px;
  760 +}
  761 +#G {
  762 + position: absolute;
  763 + top: 38px;
  764 + color: white;
  765 +}
  766 +#bt {
  767 + position: relative;
  768 + top: -20px;
  769 + left: 115px;
  770 +}
  771 +#e {
  772 + position: relative;
  773 + top: 5px;
  774 + right: -30px;
  775 + height: 17px;
  776 + cursor: pointer;
  777 +}
  778 +#d {
  779 + position: relative;
  780 + top: 5px;
  781 + right: -70px;
  782 + height: 17px;
  783 + cursor: pointer;
  784 +}
  785 +#td {
  786 + border: 1px solid #dddddd;
  787 + text-align: left;
  788 + padding: 8px;
  789 +}
  790 +#dialog {
  791 + height: 550px;
  792 +}
  793 +.active {
  794 + background-color: black;
  795 + color: white !important;
  796 +}
  797 +.activebtn {
  798 + color: black !important;
  799 +}
  800 +#flex {
  801 + height: 300px;
  802 +}
  803 +.top {
  804 + margin-top: 100px;
  805 +}
  806 +.v-tabs__item a {
  807 + font-size: 16px !important;
  808 +}
  809 +@media screen and (max-width: 769px) {
  810 + .top {
  811 + margin-top: 0 !important;
  812 + }
  813 + .userSearch .v-icon {
  814 + font-size: 20px !important;
  815 + margin-left: 20px;
  816 + }
  817 +}
  818 +@media screen and (max-width: 380px) {
  819 + .right {
  820 + float: none !important;
  821 + }
  822 + .subheading {
  823 + font-size: 14px !important;
  824 + }
  825 + .v-card__actions .v-btn {
  826 + margin: 0 0px;
  827 + min-width: 100px;
  828 + }
  829 + /* .searchIcon .v-icon {
  830 + font-size: 20px;
  831 + margin-left: 20px;
  832 +} */
  833 + .subheading {
  834 + font-size: 12px !important;
  835 + }
  836 + h5 {
  837 + font-size: 13px;
  838 + }
  839 +}
  840 +.v-icon {
  841 + font-size: 30px;
  842 +}
  843 +@media screen and (min-width: 1270px) {
  844 + .hide {
  845 + display: none;
  846 + }
  847 + /* }
  848 +@media screen and (max-width: 962px) {
  849 +.imglogo{
  850 + position: absolute;
  851 + top: 13px;
  852 + left: 13px !important;
  853 + width: 70px;
  854 + height: 24px;
  855 +} */
  856 +}
  857 +@media screen and (max-width: 420px) {
  858 + .userSearch .v-text-field .v-label {
  859 + line-height: 24px !important;
  860 + }
  861 + .userSearch .v-label {
  862 + font-size: 13px !important;
  863 + }
  864 + .v-list__tile {
  865 + font-size: 14px;
  866 + padding: 0 10px;
  867 + }
  868 + .name {
  869 + font-size: 15px;
  870 + }
  871 +}
  872 +</style>
0 873 \ No newline at end of file
... ...