Blame view

src/pages/questions.vue 4.78 KB
04e3fbc56   Jatinder Singh   minor fix
1
  <template>
03dcbf0c1   Neeraj Sharma   fix all api and r...
2
   <v-flex>
a95d2830c   Neeraj Sharma   add country selec...
3
4
    <app-toolbar class="app--toolbar"></app-toolbar>
     <v-card>
2a4dbc6e3   Neeraj Sharma   fix panel
5
       <!-- only showing btn on lg-screen -->
afd329a86   Neeraj Sharma   add answer table ...
6
7
8
9
      <v-toolbar flat color="white" class="hidden-xs-only hidden-md-only hidden-sm-only">
        <h3 style="position:relative; left:0px; top:-5px;"><b>Forum Questions</b></h3>
         <h5 style="position:relative;top:-15px;left:40px;">Select Category</h5>
          <span style="position:relative; left:-95px; top:10px;">
2a4dbc6e3   Neeraj Sharma   fix panel
10
            <!-- Suggestion component -->
c17e4f0cd   Jatinder Singh   question changes
11
          <v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn>
2a4dbc6e3   Neeraj Sharma   fix panel
12
            <!-- Suggestion Sex -->
c17e4f0cd   Jatinder Singh   question changes
13
          <v-btn color="grey darken-2" v-on:click="component='sex' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>Sex</v-btn>
2a4dbc6e3   Neeraj Sharma   fix panel
14
            <!-- Suggestion Health -->
c17e4f0cd   Jatinder Singh   question changes
15
          <v-btn color="grey darken-2" v-on:click="component='health' , activebtn('new1')" v-bind:class="{ activebtn: Activebtn2 }" flat>Health</v-btn>
2a4dbc6e3   Neeraj Sharma   fix panel
16
            <!-- Suggestion Skin & Beauty-->
c17e4f0cd   Jatinder Singh   question changes
17
          <v-btn color="grey darken-2" v-on:click="component='skin' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>Skin & Beauty</v-btn>
2a4dbc6e3   Neeraj Sharma   fix panel
18
            <!-- Suggestion Diet & Ex-->
c17e4f0cd   Jatinder Singh   question changes
19
          <v-btn color="grey darken-2" v-on:click="component='diet' , activebtn('new3')" v-bind:class="{ activebtn: Activebtn4 }" flat>Diet & Ex</v-btn>
afd329a86   Neeraj Sharma   add answer table ...
20
          </span>
2a4dbc6e3   Neeraj Sharma   fix panel
21
22
23
24
25
26
27
28
          <v-spacer></v-spacer>
          <v-text-field
          flat
          prepend-icon="search"
          label="Find your user"
          color="black"
          >
        </v-text-field>
afd329a86   Neeraj Sharma   add answer table ...
29
        </v-toolbar>
2a4dbc6e3   Neeraj Sharma   fix panel
30
        <!-- not showing on lg-screen-->
afd329a86   Neeraj Sharma   add answer table ...
31
32
33
34
        <div class="hidden-lg-only">
        <h4><b>Forum Questions</b></h4>
         <h5 style="">Select Category:</h5>
         <v-tabs
2a4dbc6e3   Neeraj Sharma   fix panel
35
36
37
         color="white"
         show-arrows
          >
afd329a86   Neeraj Sharma   add answer table ...
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
        <v-tabs-slider color="black"></v-tabs-slider>
        <v-tab>
         <v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn>
        </v-tab>
        <v-tab>
         <v-btn color="grey darken-2" v-on:click="component='sex' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>Sex</v-btn>
        </v-tab>
        <v-tab>
          <v-btn color="grey darken-2" v-on:click="component='health' , activebtn('new1')" v-bind:class="{ activebtn: Activebtn2 }" flat>Health</v-btn>
        </v-tab>
        <v-tab>
          <v-btn color="grey darken-2" v-on:click="component='skin' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>Skin & Beauty</v-btn>
        </v-tab>
        <v-tab>
          <v-btn color="grey darken-2" v-on:click="component='diet' , activebtn('new3')" v-bind:class="{ activebtn: Activebtn4 }" flat>Diet & Ex</v-btn>
        </v-tab>
      </v-tabs>      
     </div>
     <component v-bind:is="component"></component>
03dcbf0c1   Neeraj Sharma   fix all api and r...
57
58
    </v-card>
    </v-flex> 
04e3fbc56   Jatinder Singh   minor fix
59
60
  </template>
  <script>
e173bab21   Jatinder Singh   api
61
  import axios from 'axios';
c17e4f0cd   Jatinder Singh   question changes
62
63
64
65
66
  import suggestion from '@/components/questions/suggestion.vue';
  import sex from '@/components/questions/sex.vue'; 
  import health from '@/components/questions/health.vue';
  import skin from '@/components/questions/skin.vue';
  import diet from '@/components/questions/diet.vue';
f7979ec1a   Neeraj Sharma   add seach in heal...
67
  import AppToolbar from '@/components/AppToolbar';
04e3fbc56   Jatinder Singh   minor fix
68
  export default {
c17e4f0cd   Jatinder Singh   question changes
69
70
71
72
73
74
    components: {
      'suggestion': suggestion,
      'sex': sex,
      'health': health,
      'skin': skin,
      'diet': diet,
f7979ec1a   Neeraj Sharma   add seach in heal...
75
       AppToolbar,
c17e4f0cd   Jatinder Singh   question changes
76
    },
04e3fbc56   Jatinder Singh   minor fix
77
    data: () => ({
c17e4f0cd   Jatinder Singh   question changes
78
79
80
81
82
83
      component: 'suggestion',
      isActivebtn: true,
      Activebtn1: false,
      Activebtn2: false,
      Activebtn3: false,
      Activebtn4: false,
04e3fbc56   Jatinder Singh   minor fix
84
    }),
04e3fbc56   Jatinder Singh   minor fix
85
    methods: {
c17e4f0cd   Jatinder Singh   question changes
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
      activebtn (type) {
        switch (type) {
          case 'existing':
            this.Activebtn4 = false;
            this.Activebtn3 = false;
            this.Activebtn2 = false;
            this.Activebtn1 = false;
            this.isActivebtn = true;
            break;
          case 'new':
            this.Activebtn4 = false;
            this.Activebtn3 = false;
            this.Activebtn2 = false;
            this.Activebtn1 = true;
            this.isActivebtn = false;
            break;
          case 'new1':
            this.Activebtn4 = false;
            this.Activebtn3 = false;
            this.Activebtn2 = true;
            this.Activebtn1 = false;
            this.isActivebtn = false;
            break;
          case 'new2':
            this.Activebtn4 = false;
            this.Activebtn3 = true;
            this.Activebtn2 = false;
            this.Activebtn1 = false;
            this.isActivebtn = false;
            break;
          default:
            this.Activebtn4 = true;
            this.Activebtn3 = false;
            this.Activebtn2 = false;
            this.Activebtn1 = false;
            this.isActivebtn = false;
            break;
04e3fbc56   Jatinder Singh   minor fix
123
        }
04e3fbc56   Jatinder Singh   minor fix
124
      },
c17e4f0cd   Jatinder Singh   question changes
125
    }
04e3fbc56   Jatinder Singh   minor fix
126
  };
269061695   Jatinder Singh   changes
127
  </script>
c17e4f0cd   Jatinder Singh   question changes
128
  <style scoped>
7e8044568   Jatinder Singh   table header changes
129
  #td{
269061695   Jatinder Singh   changes
130
131
      border: 1px solid #dddddd;
      text-align: left;
8fc85e8ec   Jatinder Singh   data table changes
132
      padding: 8px;
c17e4f0cd   Jatinder Singh   question changes
133
134
135
  }
  .activebtn {
    color: black !important;
269061695   Jatinder Singh   changes
136
137
  }
  </style>