changes something mobile design

Neeraj Sharma
1 parent eba96ec517
Showing 5 changed files with 27 additions and 5 deletions Show diff stats
src/App.vue
src/components/AppToolbar.vue
src/pages/Dashboard.vue
src/pages/Provider.vue
src/pages/notification.vue
@@ -111,6 +111,6 @@ export default {
     right:0;
     border-radius:0  
   .page-wrapper
-    min-height:calc(100vh - 64px - 50px - 81px );  
+    min-height:calc(1000px - 64px - 50px - 81px );  
  
 </style>
@@ -17,7 +17,7 @@
       >
       </v-text-field> -->
       <v-spacer></v-spacer>
-      <h5 class="white--text">{{userName}}</h5>
+      <h5 class="white--text name">{{userName}}</h5>
       <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
      <v-btn icon large flat slot="activator">
           <v-avatar size="40px">
@@ -104,10 +104,20 @@ mounted(){
   display: none;
 }
 }
-@media screen and (max-width: 420px) { 
+@media screen and (max-width: 420px) {
+img{
+    position: absolute;
+    top: 13px;
+    left: 13px !important;
+    width: 70px;
+    height: 24px;
+}
 .v-list__tile {
   font-size:14px;
   padding: 0 10px;
 }
+.name{
+  font-size:15px; 
+}
 }
 </style>
@@ -724,6 +724,12 @@ h4 {
 .v-tabs__item a{
   font-size:16px !important; 
 }
+@media screen and (max-width: 769px){
+  .top{
+    margin-top:0 !important;
+  }
+  
+}
 @media screen and (max-width: 380px) {
 .right {
     float: none !important;
@@ -8,7 +8,7 @@
         </v-flex>
         <v-spacer></v-spacer>
         <!-- SEARCH ALL HEALTH PROVIDER -->
-        <v-flex xs8 sm4 lg3>
+        <v-flex xs12 sm4 lg3 class="top">
           <v-text-field
             justify-right
             prepend-icon="search"
@@ -390,6 +390,12 @@ export default {
 .v-select_selctions.v-select_slot.v-select_selection {
   color: black !important;
 }
+@media screen and (max-width: 769px){
+  .top{
+    margin-top:30px;
+  }
+  
+}
 @media screen and (max-width: 476px) {
   .flex.xs4 {
     flex-basis: 55.666667%;
@@ -4,7 +4,7 @@
     <v-toolbar color="white">
       <h4 class="text-lg-left"><b>Push Notification</b></h4>
       <v-spacer></v-spacer>
-      <v-flex xs6 sm4>
+      <v-flex xs5 sm4>
       <v-text-field justify-right
         prepend-icon="search"
         v-model="search"
...	...	@@ -111,6 +111,6 @@ export default {
111	111	right:0;
112	112	border-radius:0
113	113	.page-wrapper
114		- min-height:calc(100vh - 64px - 50px - 81px );
	114	+ min-height:calc(1000px - 64px - 50px - 81px );
115	115
116	116	</style>
...	...
...	...	@@ -17,7 +17,7 @@
17	17	>
18	18	</v-text-field> -->
19	19	<v-spacer></v-spacer>
20		- <h5 class="white--text">{{userName}}</h5>
	20	+ <h5 class="white--text name">{{userName}}</h5>
21	21	<v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
22	22	<v-btn icon large flat slot="activator">
23	23	<v-avatar size="40px">
...	...	@@ -104,10 +104,20 @@ mounted(){
104	104	display: none;
105	105	}
106	106	}
107		-@media screen and (max-width: 420px) {
	107	+@media screen and (max-width: 420px) {
	108	+img{
	109	+ position: absolute;
	110	+ top: 13px;
	111	+ left: 13px !important;
	112	+ width: 70px;
	113	+ height: 24px;
	114	+}
108	115	.v-list__tile {
109	116	font-size:14px;
110	117	padding: 0 10px;
111	118	}
	119	+.name{
	120	+ font-size:15px;
	121	+}
112	122	}
113	123	</style>
...	...
...	...	@@ -724,6 +724,12 @@ h4 {
724	724	.v-tabs__item a{
725	725	font-size:16px !important;
726	726	}
	727	+@media screen and (max-width: 769px){
	728	+ .top{
	729	+ margin-top:0 !important;
	730	+ }
	731	+
	732	+}
727	733	@media screen and (max-width: 380px) {
728	734	.right {
729	735	float: none !important;
...	...
...	...	@@ -8,7 +8,7 @@
8	8	</v-flex>
9	9	<v-spacer></v-spacer>
10	10	<!-- SEARCH ALL HEALTH PROVIDER -->
11		- <v-flex xs8 sm4 lg3>
	11	+ <v-flex xs12 sm4 lg3 class="top">
12	12	<v-text-field
13	13	justify-right
14	14	prepend-icon="search"
...	...	@@ -390,6 +390,12 @@ export default {
390	390	.v-select_selctions.v-select_slot.v-select_selection {
391	391	color: black !important;
392	392	}
	393	+@media screen and (max-width: 769px){
	394	+ .top{
	395	+ margin-top:30px;
	396	+ }
	397	+
	398	+}
393	399	@media screen and (max-width: 476px) {
394	400	.flex.xs4 {
395	401	flex-basis: 55.666667%;
...	...
...	...	@@ -4,7 +4,7 @@
4	4	<v-toolbar color="white">
5	5	<h4 class="text-lg-left"><b>Push Notification</b></h4>
6	6	<v-spacer></v-spacer>
7		- <v-flex xs6 sm4>
	7	+ <v-flex xs5 sm4>
8	8	<v-text-field justify-right
9	9	prepend-icon="search"
10	10	v-model="search"
...	...