Nav.vue 9.32 KB
Newer Older
shabai517's avatar
shabai517 committed
1
<template>
2 3 4 5 6 7 8
  <div class="nav-container">
    <div data-sticky-container>
      <header class="masthead ebi-masthead" data-sticky data-sticky-on="large" data-top-anchor="content:top" data-btm-anchor="content:bottom">
        <div class="masthead-inner row">
          <!-- local-title -->
          <div class="columns medium-5" id="local-title">
            <div class="pride-logo">
shabai517's avatar
shabai517 committed
9
              <a href="../../" title="Back to [service-name] homepage"><img :src="logoURL" alt="logo" width="500"></a>
shabai517's avatar
shabai517 committed
10
            </div>
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
          </div>
          <!-- /local-title -->
          <div class="columns medium-10">
            <span id="quickgo-header-subtext"><h1 ng-hide="location.path()!=='/'" class="landingpage-title">{{title}}</h1></span>
          </div>
          <!-- local-search -->
          <!--
          <div class="columns medium-10">
            <form id="local-search" name="local-search" action="[search-action]" method="post">
              <h4>Search this project</h4>
              <fieldset class="ebi-fieldset">
                <div class="input-group margin-bottom-none">
                  <input type="text" name="first" id="local-searchbox" placeholder="Search this service" class="input-group-field">
                  <div class="input-group-button">
                    <input type="submit" name="submit" value="1" class="button icon icon-functional">
                  </div>
                </div>
                <small class="">-->
          <!-- If your search is more complex than just a keyword search, you can link to an Advanced Search -->
          <!-- <span class="adv"><a href="../search" id="adv-search" title="Advanced">Advanced</a></span> | -->
          <!-- Include some example searchterms - keep them short and few. -->
          <!--
          <a href="[search-url-1]">[search-1]</a>
          <a href="[search-url-1]">[search-2]</a>
          <a href="[search-url-1]">[search-3]</a>
        </small>
      </fieldset>
    </form>
  </div>
  -->
          <!-- /local-search -->
          <!-- local-nav -->
          <nav class="sub-nav-ebi">
            <ul id="local-nav" class="dropdown menu float-left" data-description="navigational">
              <li class="sub-nav-list">
                <Dropdown>
                  <a href="javascript:void(0)" @click="gotoLandingpage">
                    <i class="fas fa-home"></i>
                    <span class='sub-nav-title'>Home</span>
                  </a>
                </Dropdown>
              </li>
              <li class="sub-nav-list">
                <Dropdown @on-click="resourcesClick">
                  <a href="javascript:void(0)">
                    <i class="fas fa-search"></i>
                    <span class='sub-nav-title'>Resources</span>
                    <Icon type="chevron-down"></Icon>
                  </a>
                  <DropdownMenu slot="list">
                    <DropdownItem name="goToArchive">PRIDE Archive</DropdownItem>
                    <DropdownItem name="goToPeptidome">PRIDE Peptidome</DropdownItem>
                    <DropdownItem name="gotoSpectrumLibrary">PRIDE Spectral Libraries</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </li>
              <li class="sub-nav-list">
                <Dropdown @on-click="resourcesClick">
                  <a href="javascript:void(0)">
                    <i class="fas fa-cogs"></i>
                    <span class='sub-nav-title'>Tools</span>
                    <Icon type="chevron-down"></Icon>
                  </a>
                  <DropdownMenu slot="list">
75
                    <!--<DropdownItem name="goToSpectraClustering">Spectra Clustering Toolsuite</DropdownItem>-->
76
                    <DropdownItem name="goToPrideSubmission">PRIDE Submission Tool</DropdownItem>
77 78 79 80 81 82 83 84 85 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
                    <DropdownItem name="goToPrideInspector">PRIDE Inspector Toolsuite</DropdownItem>
                    <DropdownItem name="goToPrideUtilities">PRIDE Utilities Libraries</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </li>
              <li class="sub-nav-list">
                <Dropdown @on-click="resourcesClick">
                  <a href="javascript:void(0)">
                    <i class="fas fa-graduation-cap"></i>
                    <span class='sub-nav-title'>Docs</span>
                    <Icon type="chevron-down"></Icon>
                  </a>
                  <DropdownMenu slot="list">
                    <!--
                    <Dropdown placement="right-start">
                        <DropdownItem>
                            User Guide
                            <Icon type="ios-arrow-right"></Icon>
                        </DropdownItem>
                        <DropdownMenu slot="list">
                            <DropdownItem>PRIDE Archive</DropdownItem>
                            <DropdownItem>PRIDE Peptidome</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    -->
                    <DropdownItem name="goToPrideArchiveWS">PRIDE Archive WS</DropdownItem>
                    <DropdownItem name="goToPridePeptidomeWS">PRIDE Peptidome WS</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </li>
              <li class="sub-nav-list">
                <Dropdown>
                  <a href="javascript:void(0)" @click="gotoAbout">
                    <i class="fas fa-info-circle"></i>
                    <span class='sub-nav-title'>About</span>
                  </a>
                </Dropdown>
              </li>
            </ul>
          </nav>
          <!-- /local-nav -->
shabai517's avatar
shabai517 committed
118
        </div>
119
      </header>
shabai517's avatar
shabai517 committed
120
    </div>
121
  </div>
shabai517's avatar
shabai517 committed
122 123
</template>
<script>
shabai517's avatar
shabai517 committed
124
  import store from "@/store/store.js"
125 126 127 128 129 130 131
  export default {
    data () {
      return {
        keyword:'',
        selected: 'archive',
        title:'',
        subnav:[],
shabai517's avatar
shabai517 committed
132 133
        landingPageJsonURL: this.$store.state.baseURL + '/static/landingPage/landing_page.json',
        logoURL: this.$store.state.baseURL + '/static/logo/PRIDE_logo.png',
134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168
      }
    },
    methods:{
      submit(){
        this.$Message.error({content:this.selected+' search coming soon', duration:3});
        this.$http
          .post("/source/type")
          .then(function(res){
            this.successSearch();
          },function(err){
            this.failSearch();
          });
      },
      successSearch(){
        this.$Message.success({content:'success search', duration:3});
      },
      failSearch(){
        this.$Message.error({content:'error search', duration:3});
      },
      gotoLandingpage(){
        this.$router.push({name:'landingpage'});
      },
      resourcesClick(name){
        if(name=='goToArchive'){
          this.$router.push({name:'archive'});
        }
        else if(name=='goToPeptidome'){
          this.$router.push({name:'peptidome'});
        }
        else if(name=='gotoSpectrumLibrary'){
          this.$router.push({name:'spectrumlibrary'});
        }
        else if(name=='goToSpectraClustering'){
          this.$router.push({path:'/markdownpage/spectraclustering'});
        }
169 170 171
        else if(name=='goToPrideSubmission'){
          this.$router.push({path:'/markdownpage/pridesubmissiontool'});
        }
172 173 174 175 176 177 178 179 180 181 182 183 184 185
        else if(name=='goToPrideInspector'){
          this.$router.push({path:'/markdownpage/prideinspector'});
        }
        else if(name=='goToPrideUtilities'){
          this.$router.push({path:'/markdownpage/prideutilities'});
        }
        else if(name=='goToPrideArchiveWS'){
          this.$router.push({path:'/markdownpage/pridearchivews'});
        }
        else if(name=='goToPridePeptidomeWS'){
          this.$router.push({path:'/markdownpage/pridepeptidomews'});
        }
      },
      gotoAbout(){
186
        this.$router.push({path:'/markdownpage/citationpage'});
187 188
      }
    },
Yasset Perez-Riverol's avatar
Yasset Perez-Riverol committed
189

190
  }
shabai517's avatar
shabai517 committed
191 192
</script>
<style scoped>
193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208
  .nav-container{
    /*
    width:100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F0F0;*/
  }
  .masthead-inner{
    color:#656665;
  }
  .ebi-fieldset{
    border: 0 !important;
  }
  .ebi-masthead{
shabai517's avatar
shabai517 committed
209
    background-image: url('../../../static/image/hero-beta-banner.png');
210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248
  }
  .ebi-masthead nav ul.menu li{
    border-right: 1px solid rgb(248,248,248,0.7);
  }
  .sub-nav-list{
    padding: 0 5px;
  }
  .sub-nav-list li{
    border-right:0px !important;
    border-bottom: 1px solid #e7e7e7 !important;
  }
  .sub-nav-list li:last-child{
    border-bottom: none !important;
  }
  .ebi-masthead nav ul.menu li:last-child{
    border: 0;
  }
  .sub-nav-ebi a:hover{
    opacity: 0.7;
  }
  .ebi-masthead h1, .ebi-masthead a{
    color:#454548;
  }
  .landingpage-title{
    font-size: 3rem;
    font-weight:300;
    font-family:Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
  }
  .pride-logo{
    margin-bottom: 20px;
  }
  .sub-nav-ebi .ivu-dropdown-menu{
    margin-left:0 !important;
  }
  .sub-nav-title{
    margin: 0 3px;
  }
  .row{
    margin:0 auto;
Yasset Perez-Riverol's avatar
Yasset Perez-Riverol committed
249

250 251 252
    max-width: 150rem !important;
  }
  #local-nav{
shabai517's avatar
shabai517 committed
253
    margin-left: 10px;
254
  }
shabai517's avatar
shabai517 committed
255 256
</style>
<style>
257 258 259 260 261 262 263 264 265 266 267 268
  .sub-nav-ebi .sub-nav-list .ivu-select-dropdown{
    padding: 0 !important;
    border-radius: 0px !important;
  }
  .sub-nav-ebi .ivu-dropdown-item{
    float: none !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
  }
  .sub-nav-ebi .ivu-dropdown-menu .ivu-dropdown{
    border-bottom: 1px solid #e7e7e7 !important;
  }
shabai517's avatar
shabai517 committed
269
</style>