viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 43fe340f5f3590e99e8bfb6b22a769a81d17d797

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

second test view invoice pdf print resposive desing

Showing 1 changed file with 100 additions and 121 deletions   Show diff stats
src/pages/Account/viewInvoice.vue
Diff comments   View file @43fe340
... ... @@ -2,18 +2,18 @@
2 2 <v-app id="pages-dasboard">
3 3 <!-- ****** Edit INVOICE ****** -->
4 4 <v-container fluid grid-list-md>
5   - <v-layout>
6   - <v-flex xs12 sm8 md10>
7   - <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()">
8   - Print
9   - <v-icon size="18" right dark>print</v-icon>
10   - </v-btn>
11   - </v-flex>
12   - </v-layout>
13 5 <v-flex xs12 sm12 id="printMe">
  6 + <v-layout>
  7 + <v-flex xs12 sm12 md10 class="mx-auto">
  8 + <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()">
  9 + Print
  10 + <v-icon size="18" right dark>print</v-icon>
  11 + </v-btn>
  12 + </v-flex>
  13 + </v-layout>
14 14 <v-layout wrap>
15 15 <!-- ****** TABLE DATA MARK ****** -->
16   - <v-flex xs12 sm12 md12>
  16 + <v-flex xs12 sm12 md10 lg10 class="mx-auto">
17 17 <v-card
18 18 style="
19 19 background-color: #fff;
... ... @@ -24,105 +24,84 @@
24 24 box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);"
25 25 >
26 26 <!-- <v-layout wrap> -->
27   - <v-flex xs12 sm12 md12 lg12>
28   - <v-layout wrap>
29   - <v-flex xs12 sm4 md4 lg4 style="text-align:center">
30   - <v-avatar>
31   - <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
32   - <img
33   - src="/static/schoolIcons/INTRACK_White.png"
34   - v-else-if="!userData.schoolLogoUrl"
35   - />
36   - </v-avatar>
37   - <p
38   - style="font-size: 20px !important;
39   - font-weight: 500;
40   - line-height: 1 !important;
41   - letter-spacing: 0.02em !important;
42   - margin:8px 0px;"
43   - >{{ userData.name }}</p>
44   - <p>{{ userData.address }}</p>
45   - </v-flex>
46   - <v-flex xs12 sm4 md4 lg4 class="text-xs-center">
47   - <v-layout>
48   - <v-flex xs4 sm3>
49   - <h5 style="float:right;margin: 4px 0px;">
50   - <b>Name:</b>
51   - </h5>
52   - </v-flex>
53   - <v-flex sm9 xs8>
54   - <h5
55   - style="margin: 4px 0px;float: left;"
56   - >{{ invoiceParticularData.studentId.name }}</h5>
57   - </v-flex>
58   - </v-layout>
59   - <v-layout>
60   - <v-flex xs4 sm3>
61   - <h5 style="float:right;margin: 4px 0px;">
62   - <b>Class:</b>
63   - </h5>
64   - </v-flex>
65   - <v-flex sm9 xs8>
66   - <h5
67   - style="margin: 4px 0px;float: left;"
68   - >{{ invoiceParticularData.classId.classNum }}</h5>
69   - </v-flex>
70   - </v-layout>
71   - <v-layout>
72   - <v-flex xs4 sm3>
73   - <h5 style="float:right;;margin: 4px 0px;">
74   - <b>Roll:</b>
75   - </h5>
76   - </v-flex>
77   - <v-flex sm9 xs8>
78   - <h5
79   - style="margin: 4px 0px;float: left;"
80   - >{{ invoiceParticularData.studentId.rollNo }}</h5>
81   - </v-flex>
82   - </v-layout>
83   - <v-layout>
84   - <v-flex xs4 sm3>
85   - <h5 style="float:right;margin: 4px 0px;">
86   - <b>email:</b>
87   - </h5>
88   - </v-flex>
89   - <v-flex sm9 xs8>
90   - <h5
91   - class="linkCover"
92   - style="margin: 4px 0px;float: left;"
93   - >{{ invoiceParticularData.studentId.email }}</h5>
94   - </v-flex>
95   - </v-layout>
96   - </v-flex>
97   - <v-flex xs12 sm4 md4 lg4 class="text-xs-center">
98   - <v-layout>
99   - <v-flex xs4 sm3>
100   - <h5 style="float:right;margin: 4px 0px;">
101   - <b>invoice:</b>
102   - </h5>
103   - </v-flex>
104   - <v-flex sm9 xs8>
105   - <h5
106   - style="margin: 4px 0px;float: left;"
107   - >#{{ invoiceParticularData.invoiceNumber }}</h5>
  27 + <v-layout wrap>
  28 + <v-flex xs12 sm12 md12>
  29 + <div
  30 + style="
  31 + border-bottom: 1px solid #ddd;
  32 + overflow: hidden;
  33 + vertical-align: middle;
  34 + margin: 10px;
  35 + padding-bottom: 10px;"
  36 + >
  37 + <v-flex xs12 sm12 md12>
  38 + <v-layout>
  39 + <div class="school-logo">
  40 + <v-avatar>
  41 + <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
  42 + <img
  43 + src="/static/schoolIcons/INTRACK_White.png"
  44 + v-else-if="!userData.schoolLogoUrl"
  45 + />
  46 + </v-avatar>
  47 + </div>
  48 + <div class="school-name">
  49 + <h2>{{ userData.name }}</h2>
  50 + </div>
  51 + </v-layout>
  52 + </v-flex>
  53 + </div>
  54 + </v-flex>
  55 + <!-- Profile School -->
  56 + <v-layout>
  57 + <!-- school info -->
  58 + <v-flex xs12 sm12 md12 lg12 style="margin:0px 10px; ">
  59 + <v-layout wrap>
  60 + <v-flex xs12 sm4 md4 lg4 style="padding:4px;padding-left:16px;">
  61 + <span style="font-size: 16px; color: #707478;">From</span>
  62 + <br />
  63 + <p style="font-size:20px;margin-bottom: 16px;">{{ userData.name }}</p>
  64 + <p
  65 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  66 + >{{ userData.address }}</p>
  67 + <p
  68 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  69 + >Phone : {{ userData.mobile }}</p>
  70 + <p
  71 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  72 + >Email : {{ userData.email }}</p>
108 73 </v-flex>
109   - </v-layout>
110   - <v-layout>
111   - <v-flex xs4 sm3>
112   - <h5 style="float:right;margin: 4px 0px;">
113   - <b>Status:</b>
114   - </h5>
  74 + <!-- student info -->
  75 + <v-flex xs12 sm4 md4 lg4 style="padding:4px;padding-left:16px;">
  76 + <span style="font-size: 16px; color: #707478;">To</span>
  77 + <br />
  78 + <p
  79 + style="font-size:20px;margin-bottom: 16px;"
  80 + >{{ invoiceParticularData.studentId.name }}</p>
  81 + <p
  82 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  83 + >Class : {{ invoiceParticularData.classId.classNum }}</p>
  84 + <p
  85 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  86 + >Roll : {{ invoiceParticularData.studentId.rollNo }}</p>
  87 + <p
  88 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  89 + >Email : {{ invoiceParticularData.studentId.email ? invoiceParticularData.studentId.email: '-' }}</p>
115 90 </v-flex>
116   - <v-flex sm9 xs8>
117   - <h5
118   - style="margin: 4px 0px;float: left;"
119   - >{{ invoiceParticularData.paymentStatus }}</h5>
  91 + <v-flex xs12 sm4 md4 lg4 style="padding:4px;padding-left:16px;">
  92 + <br />
  93 + <p
  94 + style="font-size: 15px;margin:0px;margin-bottom:8px;"
  95 + >Invoice #{{ invoiceParticularData.invoiceNumber }}</p>
  96 + <br />
  97 + <p
  98 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  99 + >Status : {{ invoiceParticularData.paymentStatus }}</p>
120 100 </v-flex>
121 101 </v-layout>
122 102 </v-flex>
123 103 </v-layout>
124   - </v-flex>
125   - <!-- </v-layout> -->
  104 + </v-layout>
126 105 <table
127 106 class="tableRsponsive"
128 107 style="
... ... @@ -465,33 +444,33 @@ export default {
465 444 text-align: center !important;
466 445 }
467 446 .card-style {
468   - background: #7f62f8 !important;
469   - border-color: #7f62f8 !important;
470   - border-radius: 12px;
471   - text-align: center !important;
472   - padding-top: 10px !important;
  447 + background: #7f62f8 !important;
  448 + border-color: #7f62f8 !important;
  449 + border-radius: 12px;
  450 + text-align: center !important;
  451 + padding-top: 10px !important;
473 452 }
474 453 .add-button {
475   - background: #feb83c !important;
476   - border-color: #feb83c !important;
477   - text-transform: none !important;
478   - -webkit-box-shadow: none !important;
479   - box-shadow: none !important;
  454 + background: #feb83c !important;
  455 + border-color: #feb83c !important;
  456 + text-transform: none !important;
  457 + -webkit-box-shadow: none !important;
  458 + box-shadow: none !important;
480 459 }
481 460 .clear-button {
482   - background: #fa7676 !important;
483   - border-color: #fa7676 !important;
484   - text-transform: none !important;
485   - -webkit-box-shadow: none !important;
486   - box-shadow: none !important;
  461 + background: #fa7676 !important;
  462 + border-color: #fa7676 !important;
  463 + text-transform: none !important;
  464 + -webkit-box-shadow: none !important;
  465 + box-shadow: none !important;
487 466 }
488 467 .card-styles {
489   - background: #7f62f8 !important;
490   - border-color: #7f62f8 !important;
  468 + background: #7f62f8 !important;
  469 + border-color: #7f62f8 !important;
491 470 }
492 471 .v-card__actions .v-btn {
493   - margin: 0 15px !important;
494   - min-width: 96px !important;
  472 + margin: 0 15px !important;
  473 + min-width: 96px !important;
495 474 }
496 475 /* th,
497 476 td {
... ...