News.vue 11.5 KB
Newer Older
1 2
<template>
  <div class="news-container">
shabai517's avatar
shabai517 committed
3
     <!--<h1>News</h1>-->
4
     <Row class="row" type="flex">
5 6 7 8 9 10
            <Col :xs="{ span: 24 }" :sm="{span: 12}" :md="{ span: 12}" :lg="{ span: 6}">
                <div class="item-container">
                    <div class="item-icon"><Icon type="document-text" size="80" color="#5bc0be"></Icon></div>
                    <div class="item-title">
                      <div>Tools</div>
                    </div>
11
                    <div class="item-content tools">
shabai517's avatar
shabai517 committed
12
                        <div v-for="item in toolsSection" class="content-wrapper">
13
                            <div class="content-title">
shabai517's avatar
shabai517 committed
14
                                {{item.title}}
15 16
                            </div>
                            <div class="content-text">
shabai517's avatar
shabai517 committed
17
                                {{item.content}}
18
                            </div>
19
                            <a class="content-button" @click="moreButtonAction(item.markdownFolder,item.moreID,item.externalURL)">More</a>
20
                        </div>
21

22
                    </div>
23
                    <Button class="news-button" @click="moreButtonAction(toolsButton.markdownFolder,toolsButton.moreID,toolsButton.externalURL)">MORE</Button>
24 25 26
                </div>
            </Col>
            <Col :xs="{ span: 24 }" :sm="{span: 12}" :md="{ span: 12}" :lg="{ span: 6}">
shabai517's avatar
shabai517 committed
27
                <div class="item-container">
shabai517's avatar
shabai517 committed
28
                    <div class="item-icon"><Icon type="document-text" size="80" color="#5bc0be"></Icon></div>
shabai517's avatar
shabai517 committed
29 30 31
                    <div class="item-title">
                      <div>Documentation</div>
                    </div>
32
                    <div class="item-content docs">
shabai517's avatar
shabai517 committed
33
                        <div v-for="item in documentationSection" class="content-wrapper">
34
                            <div class="content-title">
shabai517's avatar
shabai517 committed
35
                                {{item.title}}
36 37
                            </div>
                            <div class="content-text">
shabai517's avatar
shabai517 committed
38
                                {{item.content}}
39
                            </div>
40
                            <a class="content-button"@click="moreButtonAction(item.markdownFolder,item.moreID,item.externalURL)">More</a>
41
                        </div>
shabai517's avatar
shabai517 committed
42
                    </div>
43
                    <Button class="news-button" @click="moreButtonAction(documentationButton.markdownFolder,documentationButton.moreID,documentationButton.externalURL)">MORE</Button>
44
                </div>
shabai517's avatar
shabai517 committed
45
            </Col>
46
            <Col :xs="{ span: 24 }" :sm="{span: 12}" :md="{ span: 12}" :lg="{ span: 6}">
shabai517's avatar
shabai517 committed
47
                <div class="item-container">
shabai517's avatar
shabai517 committed
48
                    <div class="item-icon"><Icon type="social-twitter" size="80" color="#5bc0be"></Icon></div>
shabai517's avatar
shabai517 committed
49 50 51
                    <div class="item-title">
                      <div>Tweets</div>
                    </div>
shabai517's avatar
shabai517 committed
52
                    <div class="item-content tweet">
shabai517's avatar
shabai517 committed
53
                        <Timeline :id="'pride_ebi'" :widget-class="`tweet-class`" :sourceType="'profile'" :options="{ tweetLimit: '5   ', chrome:'transparent', linkColor:'#656665', borderColor:'#656665'}"/>
shabai517's avatar
shabai517 committed
54
                    </div>
shabai517's avatar
shabai517 committed
55
                    <Button class="news-button" @click="twitterMoreButtonAction()"><Icon class="twitter-icon" type="social-twitter"></Icon>Follow @PRIDE</Button>
56
                </div>
shabai517's avatar
shabai517 committed
57
            </Col>
58
            <Col :xs="{ span: 24 }" :sm="{span: 12}" :md="{ span: 12}" :lg="{ span: 6}">
shabai517's avatar
shabai517 committed
59
                <div class="item-container">
shabai517's avatar
shabai517 committed
60
                    <div class="item-icon"><Icon type="social-twitch" size="80" color="#5bc0be"></Icon></div>
shabai517's avatar
shabai517 committed
61 62 63
                    <div class="item-title">
                      <div>Citation</div>
                    </div>
shabai517's avatar
shabai517 committed
64
                    <div class="item-content citation">
65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
                        <div class="item-content">
                            <div class="content-title">
                                {{citation.lineone}}
                            </div>
                            <div class="content-text">
                                <div>
                                    {{citation.linetwo}}
                                </div>
                                <div>
                                    <a>{{citation.linethree}}</a>
                                </div>
                                <div>
                                     {{citation.linefour}}
                                </div>
                            </div>
                        </div>
shabai517's avatar
shabai517 committed
81
                    </div>
shabai517's avatar
shabai517 committed
82
                    <Button class="news-button" @click="moreButtonAction(citation.button.markdownFolder)">MORE</Button>
83
                </div>
shabai517's avatar
shabai517 committed
84
            </Col>
shabai517's avatar
shabai517 committed
85
     </Row>
86 87 88
  </div>
</template>
<script>
shabai517's avatar
shabai517 committed
89
    import Timeline from 'vue-tweet-embed/timeline'
shabai517's avatar
shabai517 committed
90
    import store from "@/store/store.js"
91
    export default {
shabai517's avatar
shabai517 committed
92 93 94
        components: {
          Timeline
        },
95 96 97 98 99
        data () {
            return {
                value1: 0,
                setting: {
                    dots: 'none',
shabai517's avatar
shabai517 committed
100 101 102 103 104
                },
                info:{
                    document: 0,
                    tweet: 0,
                    citation: 0,
shabai517's avatar
shabai517 committed
105
                },
shabai517's avatar
shabai517 committed
106 107 108 109
                toolsSection:[],
                toolsButton:{},
                documentationSection:[],
                documentationButton:{},
shabai517's avatar
shabai517 committed
110 111 112 113 114
                citation:{
                    lineone:'',
                    linetwo:'',
                    linethree:'',
                    linefour:'',
shabai517's avatar
shabai517 committed
115
                    button:{}
shabai517's avatar
shabai517 committed
116
                },
shabai517's avatar
shabai517 committed
117
                landingPageJsonURL: this.$store.state.baseURL + '/static/landingPage/landing_page.json'
118
            }
shabai517's avatar
shabai517 committed
119 120 121 122
        },
        methods:{
            documentQuery(){
                this.$http
shabai517's avatar
shabai517 committed
123
                  .get(this.landingPageJsonURL)
shabai517's avatar
shabai517 committed
124
                  .then(function(res){
shabai517's avatar
shabai517 committed
125 126 127 128 129
                    this.documentation = res.body.news.documentation;
                    this.citation.lineone = res.body.news.citation.lineone;
                    this.citation.linetwo = res.body.news.citation.linetwo;
                    this.citation.linethree = res.body.news.citation.linethree;
                    this.citation.linefour = res.body.news.citation.linefour;
shabai517's avatar
shabai517 committed
130
                    this.citation.button = res.body.news.citation.button;
shabai517's avatar
shabai517 committed
131 132 133 134
                    this.toolsSection = res.body.news.tools.section;
                    this.toolsButton = res.body.news.tools.button;
                    this.documentationSection = res.body.news.documentation.section;
                    this.documentationButton = res.body.news.documentation.button;
shabai517's avatar
shabai517 committed
135
                  },function(err){
Yasset Perez-Riverol's avatar
Yasset Perez-Riverol committed
136 137

                  });
shabai517's avatar
shabai517 committed
138 139
            },
            tweetQuery(){
shabai517's avatar
shabai517 committed
140
                //this.$Message.success({content:'documents update', duration:1});
shabai517's avatar
shabai517 committed
141 142 143 144 145 146 147
                this.info.tweet = Math.floor(Math.random()* 1000);
                /*
                this.$http
                  .get("/tweet/get")
                  .then(function(res){
                    this.info.tweet = res.body.data.tweetNum;
                  },function(err){
Yasset Perez-Riverol's avatar
Yasset Perez-Riverol committed
148 149 150

                  });
                */
shabai517's avatar
shabai517 committed
151 152
            },
            citationQuery(){
shabai517's avatar
shabai517 committed
153
                //this.$Message.success({content:'documents update', duration:1});
shabai517's avatar
shabai517 committed
154 155 156 157 158 159 160
                this.info.citation = Math.floor(Math.random()* 1000);
                /*
                this.$http
                  .get("/citation/get")
                  .then(function(res){
                    this.info.citation = res.body.data.citationNum;
                  },function(err){
Yasset Perez-Riverol's avatar
Yasset Perez-Riverol committed
161 162

                  });
shabai517's avatar
shabai517 committed
163 164
                */
            },
165 166 167 168 169
            moreButtonAction(subpage, id, externalLink){
                if(externalLink){
                    window.open(externalLink);
                    return;
                }
shabai517's avatar
shabai517 committed
170 171 172 173
                if(id){
                    id = id.replace(/(^\s*)|(\s*$)/g,'').replace(/\s/g,'_').toLowerCase();
                    this.$router.push({path:'/markdownpage/'+subpage+'#'+id});
                }
174
                else
shabai517's avatar
shabai517 committed
175 176
                    this.$router.push({path:'/markdownpage/'+subpage});
                //this.$router.push({name:'/markdownpage#123',params: { subpage: subpage }, query: { step: id }});
177
            },
shabai517's avatar
shabai517 committed
178
            twitterMoreButtonAction(){
shabai517's avatar
shabai517 committed
179 180
                window.open("https://twitter.com/pride_ebi");
                //location.href="https://twitter.com/pride_ebi"
shabai517's avatar
shabai517 committed
181
            }
shabai517's avatar
shabai517 committed
182 183 184 185 186
        },
        mounted:function(){
            this.documentQuery();
            this.tweetQuery();
            this.citationQuery();
187 188 189 190 191
        }
    }
</script>
<style scoped>
    .news-container{
shabai517's avatar
shabai517 committed
192
        width:80%;
193 194
        height: 100%;
        position: relative;
shabai517's avatar
shabai517 committed
195
        padding: 50px 0;
shabai517's avatar
shabai517 committed
196
        margin:0 auto;
197 198 199 200 201
    }
    .row{
        margin:0 auto;
        display: flex;
        align-items: center;
202
        max-width: 100rem !important;
203 204 205
    }
    .item-container{
        text-align: center;
shabai517's avatar
shabai517 committed
206 207 208 209 210
        margin: 15px;
        border: 1px solid #ececec;
        border-radius: 6px;

        padding: 2.78571429em;
211
    }
shabai517's avatar
shabai517 committed
212
    .item-content{
213

214 215
        display: flex;
        flex-direction:column;
shabai517's avatar
shabai517 committed
216
        color: #666;
shabai517's avatar
shabai517 committed
217 218
        height:300px;
        background-color: white;
219
        overflow: scroll;
shabai517's avatar
shabai517 committed
220
    }
shabai517's avatar
shabai517 committed
221 222 223 224 225
    .item-content.citation{
        font-size: 16px;
        text-align: justify;
        /*padding: 10px 0;*/
    }
226 227 228
    .item-content.tools{
      text-align: justify;
    }
229 230 231
    .item-content.docs{
      text-align: justify;
    }
232

233 234 235
    .item-content.citation span:last-child{
        margin-bottom: 0;
    }
shabai517's avatar
shabai517 committed
236 237 238
    .item-content span{
        margin-bottom: 5px;
    }
239 240 241 242 243 244 245 246
    .item-container .item-content .content-title{
        text-align: justify;
        font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif;
        font-size: 21px;
        font-weight: 400;
        line-height: 24px;
        color: rgb(41, 47, 51);
        padding-top: 10px;
247
    }
248 249 250 251 252
    .item-container .item-content .content-text{
        margin: 10px 0;
        padding: 10px 0;
        border-top: 1px solid rgb(0, 0, 0);
    }
253

shabai517's avatar
shabai517 committed
254 255
    .item-title{
        font-size:18px;
shabai517's avatar
shabai517 committed
256
        margin-bottom: 30px;
shabai517's avatar
shabai517 committed
257
    }
shabai517's avatar
shabai517 committed
258 259 260
    .item-icon{
        margin-bottom: 12px;
    }
261 262 263
    .content-button{
        float: right;
    }
shabai517's avatar
shabai517 committed
264
    .news-button{
shabai517's avatar
shabai517 committed
265 266 267 268
        background-color: #1b95e0;
        border: none;
        color: #fff;
        font-weight: 900;
shabai517's avatar
shabai517 committed
269
        font-size: 12px;
shabai517's avatar
shabai517 committed
270 271 272
        height: 28px;
        width: 150px;
        border-radius: 4px;
273
        margin-top: 20px;
shabai517's avatar
shabai517 committed
274
        padding: 1px 10px 1px 9px;
shabai517's avatar
shabai517 committed
275
    }
shabai517's avatar
shabai517 committed
276
    .news-button:hover{
shabai517's avatar
shabai517 committed
277
           background-color: #0c7abf;
shabai517's avatar
shabai517 committed
278 279 280 281 282 283
        /*
        background-color:#5bc0be;
        color:#f8f8f8;
        border: 1px solid #5bc0be !important;
        */
    }
284 285
    .twitter-icon{
        margin-right: 10px;
shabai517's avatar
shabai517 committed
286
    }
shabai517's avatar
shabai517 committed
287 288 289 290 291 292
    h1{
        color: #656665;
        font-size: 3.14285714em;
        font-weight: bold;
        font-family: Open Sans,Helvetica,Arial,sans-serif;
        margin-bottom: 20px;
shabai517's avatar
shabai517 committed
293 294
        text-align: center;
    }
shabai517's avatar
shabai517 committed
295
    .tweet-class{
296
        /*overflow-y: scroll;*/
shabai517's avatar
shabai517 committed
297 298 299
    }
    ::-webkit-scrollbar {
        width: 1px;
shabai517's avatar
shabai517 committed
300 301 302
    }
    .twitter-follow-button{

shabai517's avatar
shabai517 committed
303
    }
shabai517's avatar
shabai517 committed
304
    /*@media (min-width: 768px) {
shabai517's avatar
shabai517 committed
305
        .news-container{
shabai517's avatar
shabai517 committed
306 307
            width: 750px;
        }
Yasset Perez-Riverol's avatar
Yasset Perez-Riverol committed
308

shabai517's avatar
shabai517 committed
309
    }
Yasset Perez-Riverol's avatar
Yasset Perez-Riverol committed
310
    @media (min-width: 992px) {
shabai517's avatar
shabai517 committed
311
        .news-container{
shabai517's avatar
shabai517 committed
312 313
            width: 970px;
        }
Yasset Perez-Riverol's avatar
Yasset Perez-Riverol committed
314

shabai517's avatar
shabai517 committed
315 316
    }
    @media (min-width: 1200px) {
shabai517's avatar
shabai517 committed
317
        .news-container{
shabai517's avatar
shabai517 committed
318 319 320
            width: 1170px;
        }
    }
Yasset Perez-Riverol's avatar
Yasset Perez-Riverol committed
321

shabai517's avatar
shabai517 committed
322
    @media (min-width: 1600px) {
shabai517's avatar
shabai517 committed
323
        .news-container{
shabai517's avatar
shabai517 committed
324 325 326
            width: 1300px;
        }
    }
327 328 329 330 331 332 333 334 335 336 337 338 339 340
    @media (min-width: 1800px) {
        .news-container{
            width: 1500px;
        }
    }
    @media (min-width: 2000px) {
        .news-container{
            width: 1700px;
        }
    }
    @media (min-width: 2300px) {
        .news-container{
            width: 2000px;
        }
shabai517's avatar
shabai517 committed
341
    }*/
342
</style>