Merge branch 'minimal-bar' into 'master'
Minimize and extend bar on first search done See merge request framasoft/peertube/search-index!2
This commit is contained in:
Chocobozzz
commit
7e0f110414
|
|
@ -0,0 +1,42 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="2799 -911 16 22" version="1.1" id="svg13" sodipodi:docname="logo.svg" width="16" height="22" inkscape:version="0.92.2 5c3e80d, 2017-08-06">
|
||||
<metadata id="metadata17">
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
<dc:title/>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1916" inkscape:window-height="1040" id="namedview15" showgrid="false" inkscape:zoom="29.790476" inkscape:cx="-1.1827326" inkscape:cy="12.088" inkscape:window-x="0" inkscape:window-y="18" inkscape:window-maximized="0" inkscape:current-layer="svg13"/>
|
||||
<defs id="defs4">
|
||||
<style id="style2">
|
||||
.cls-3 {
|
||||
fill: #211f20;
|
||||
}
|
||||
|
||||
.cls-4 {
|
||||
fill: #737373;
|
||||
}
|
||||
|
||||
.cls-5 {
|
||||
fill: #f1680d;
|
||||
}
|
||||
|
||||
.cls-6 {
|
||||
fill: rgba(255, 255, 255, 0);
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Artboard_1" data-name="Artboard – 1" class="cls-1" transform="translate(0.03356777,-1.9929667)">
|
||||
<g id="Symbol_3_1" data-name="Symbol 3 – 1" transform="translate(2759,-975)">
|
||||
<g id="Group_44" data-name="Group 44" transform="translate(0,2.333)">
|
||||
<path id="Path_4" data-name="Path 4" class="cls-3" d="m -949,-500 v 10.667 l 8,-5.333" transform="translate(989,564)" inkscape:connector-curvature="0" style="fill:#211f20"/>
|
||||
<path id="Path_5" data-name="Path 5" class="cls-4" d="m -949,-500 v 10.667 l 8,-5.333" transform="translate(989,574.667)" inkscape:connector-curvature="0" style="fill:#737373"/>
|
||||
<path id="Path_6" data-name="Path 6" class="cls-5" d="m -949,-500 v 10.667 l 8,-5.333" transform="translate(997,569.333)" inkscape:connector-curvature="0" style="fill:#f1680d"/>
|
||||
<path id="Path_7" data-name="Path 7" class="cls-6" d="M 0,0 V 10.667 L 8,5.333 Z" transform="rotate(180,24,40)" inkscape:connector-curvature="0" style="fill:rgba(255,255,255,0)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -24,6 +24,7 @@
|
|||
font-family: monospace;
|
||||
|
||||
.interface-language-dropdown {
|
||||
opacity: .5;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<my-header v-bind:indexName="indexName"></my-header>
|
||||
<my-header v-if="!searchDone" v-bind:indexName="indexName"></my-header>
|
||||
<div v-else class="header-left-logo">
|
||||
<img src="/img/peertube-logo.svg" alt="">
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<h3 v-bind:class="{ 'none-opacity': !instancesCount }" v-translate="{ instancesCount: instancesCount, indexedInstancesUrl: indexedInstancesUrl }">
|
||||
<h3 v-if="!searchDone" v-bind:class="{ 'none-opacity': !instancesCount }" v-translate="{ instancesCount: instancesCount, indexedInstancesUrl: indexedInstancesUrl }">
|
||||
Search for your favorite videos and channels on <a href="%{indexedInstancesUrl}" target="_blank">%{instancesCount} PeerTube websites</a> indexed by this server!
|
||||
</h3>
|
||||
|
||||
<div id="search-anchor" class="search-container">
|
||||
<div id="search-anchor" class="search-container" v-bind:class="{ 'search-container-small': !searchDone }">
|
||||
<input v-bind:placeholder="inputPlaceholder" autofocus v-on:keyup.enter="doNewSearch()" type="text" v-model="formSearch" name="search-text" />
|
||||
|
||||
<button v-on:click="doNewSearch()">
|
||||
|
|
@ -18,6 +21,8 @@
|
|||
|
||||
<translate>Go!</translate>
|
||||
</button>
|
||||
|
||||
<div v-if="searchDone" v-translate="{ instancesCount: instancesCount, indexName: indexName }">videos and channels from <a href="%{indexedInstancesUrl}" target="_blank">%{instancesCount} PeerTube instances</a> listed on <strong>%{indexName}</strong></div>
|
||||
</div>
|
||||
|
||||
<search-warning class="search-warning" v-bind:indexName="indexName" v-bind:highlight="!searchDone"></search-warning>
|
||||
|
|
@ -211,10 +216,9 @@
|
|||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
max-width: 500px;
|
||||
height: 45px;
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
|
||||
input[type=text] {
|
||||
background-color: transparent;
|
||||
|
|
@ -224,13 +228,13 @@
|
|||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
color: #000;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -253,6 +257,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
button + div {
|
||||
margin-top: 10px;
|
||||
font-size: 80%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.search-container-small {
|
||||
max-width: 500px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.header-left-logo {
|
||||
position: relative;
|
||||
height: 0;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
left: -50px;
|
||||
top: 12px;
|
||||
scale: 200%;
|
||||
transform-origin: center left;
|
||||
}
|
||||
}
|
||||
|
||||
.search-warning {
|
||||
|
|
|
|||
Loading…
Reference in New Issue