diff options
| -rw-r--r-- | fatcat_scholar/templates/about.html | 7 | ||||
| -rw-r--r-- | fatcat_scholar/templates/base.html | 52 | ||||
| -rw-r--r-- | fatcat_scholar/templates/home.html | 8 | ||||
| -rw-r--r-- | fatcat_scholar/templates/search.html | 69 | ||||
| -rw-r--r-- | fatcat_scholar/templates/search_macros.html | 6 | 
5 files changed, 100 insertions, 42 deletions
| diff --git a/fatcat_scholar/templates/about.html b/fatcat_scholar/templates/about.html new file mode 100644 index 0000000..ad984ce --- /dev/null +++ b/fatcat_scholar/templates/about.html @@ -0,0 +1,7 @@ +{% extends "base.html" %} + +{% block main %} +<h1>Some About Content</h1> + +<p>Lorem ipsum +{% endblock %} diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html index eb3deaa..78d4f29 100644 --- a/fatcat_scholar/templates/base.html +++ b/fatcat_scholar/templates/base.html @@ -34,8 +34,12 @@      .ui.inverted.menu .item:before { background: none; }      @media only screen and (max-width: 479px) { -      .mobile-hide{ display: none !important; } +      .mobile-hide { display: none !important; }      } +    @media only screen and (min-width: 480px) { +      .mobile-only { display: none !important; } +    } +      {# for fulltext search result highlighting #}      .search_highlights em {        {# yellow #} @@ -44,6 +48,13 @@        font-weight: bold;      } +    .search_filters summary::marker { +      display: none; +    } +    .search_filters summary::-webkit-details-marker { +      display: none; +    } +      footer p a {        color: rgba(255, 255, 255, 0.5);      } @@ -115,16 +126,15 @@    </div>  </header> -{% block fullmain %} +{% block fullbody %}  <div class="ui vertical stripe segment" style="background-color: #dedede;"> -  <div class="ui container" style="padding: 1em; padding-bottom: 0.0em;"> -    <div class="ui equal height grid"> +  <div class="ui container" style="padding-top: 1em; padding-bottom: 0; padding-left: 0; padding-right: 0;"> +    <div class="ui equal height stackable grid">        <div class="ui four wide column"> -        <div style="display: flex; justify-content: center; align-items: center; height:100%; width: 100%;"> +        <div style="display: flex; justify-content: center; align-items: center; height: 100%; width: 100%;">            <a href="{{ lang_prefix }}/">              <span style="font-size: 1.5rem; font-weight: bold;">[scholar.archive.org]</span>              {# hack to align vertically with search box #} -            <br>             </a>          </div>        </div> @@ -137,34 +147,36 @@                <button class="ui green button" style="border-radius: 0; background-color: #44a25a; font-size: 1.2rem;">{{ _("Search") }}</button>              </div>            </div> -          <div style="float: right; padding-top: 0.5em;"> -            <a href="#">User Guide</a> -          </div>          </form>        </div>      </div> +    <div style="display: flex; width: 100%; justify-content: space-between; padding-top: 0.5em;"> +      <div></div> +      <div> +        <a href="#" style="order: -1;">User Guide</a> +      </div> +    </div>    </div>  </div> -<main class="ui main container"> -{% block fullbody %} -  <div class="ui container text"> -    {% block body %}Nothing to see here.{% endblock %} +<main class="ui main container" style="min-height: 50vh;"> +{% block fullmain %} +  <div class="ui container text" style="margin-top: 2em;"> +    {% block main %}Nothing to see here.{% endblock %}    </div>  {% endblock %}  </main>  {% endblock %} -<div style="height: 24em;"> -</div> -<footer class="ui inverted vertical footer segment" style="padding: 5em 0em; position: absolute; bottom: 0px; width: 100%;"> +<footer class="ui inverted vertical footer segment" style="padding: 4em 0em; margin-top: 3em; width: 100%;">    <div class="ui container"> -    <div class="ui stackable inverted divided equal height grid"> +    <div class="ui stackable mobile reversed inverted divided equal height grid">        <div class="nine wide column">          <div class="ui grid"> -          <div class="three wide column" style="padding-top: 4em;"> -            <img class="logo" src="{{ url_for('static', path='/ia-logo.svg') }}" style="width: 4em; opacity: 0.5;"> +          <div class="three wide two wide computer column" style="padding-top: 4em; padding-right: 0;"> +            <img class="logo" src="{{ url_for('static', path='/ia-logo.svg') }}" style="width: 100%; opacity: 0.5;">            </div> -          <div class="twelve wide column"> +          <div class="one wide column computer only"></div> +          <div class="thirteen wide eleven wide computer column">              <h3>Internet Archive</h3>              <p style="color: rgba(255, 255, 255, 0.5);">We are a 501(c)(3) non-profit, building a digital library of Internet sites and other cultural artifacts in digital form. Other projects include the <a href="https://web.archive.org">Wayback Machine</a>, <a href="https://archive.org">archive.org</a> <a href="https://openlibrary.org">openlibrary.org</a> and <a href="https://archive-it.org">archive-it.org</a>              <div class="ui horizontal inverted link list"> diff --git a/fatcat_scholar/templates/home.html b/fatcat_scholar/templates/home.html index 2092326..66e216f 100644 --- a/fatcat_scholar/templates/home.html +++ b/fatcat_scholar/templates/home.html @@ -1,11 +1,11 @@  {% extends "base.html" %} -{% block fullmain %} +{% block fullbody %}  <div class="ui vertical stripe segment" style="background-color: #dedede;"> -  <div class="ui container" style="padding: 3em;"> +  <div class="ui container" style="padding-top: 3em; padding-bottom: 3em;">      <div class="ui centered grid"> -      <div class="ui fourteen wide column"> +      <div class="ui sixteen wide mobile twelve wide computer column">          <div style="width: 100%; text-align: center;">            <h1>Search Inside Millions of Research Papers</h1>            <br> @@ -29,7 +29,7 @@  </div>  <div class="ui container" style="padding: 1em; margin-top: 2em;"> -  <div class="ui four cards"> +  <div class="ui four doubling cards">        <div class="ui card">          <a class="image" href="https://web.archive.org/web/20171006225602/https://burnstrauma.biomedcentral.com/track/pdf/10.1186/s41038-017-0090-z?site=burnstrauma.biomedcentral.com"> diff --git a/fatcat_scholar/templates/search.html b/fatcat_scholar/templates/search.html index 6d9fec2..10eda61 100644 --- a/fatcat_scholar/templates/search.html +++ b/fatcat_scholar/templates/search.html @@ -1,20 +1,40 @@  {% import "search_macros.html" as search_macros %}  {% extends "base.html" %} -{% block fullbody %} -<div class="ui equal height divided grid" style="margin-top: 1em;"> -  <div class="ui two wide column"> +{% block fullmain %} +<div class="mobile-only" style="margin-top: 1.0em;"> +  <details class="search_filters"> +    <summary style="float: right;"><i class="filter icon"></i>Filters</summary> +    <p> +    {{ search_macros.query_option(query.time_options, query.filter_time) }} +    {{ search_macros.query_option(query.type_options, query.filter_type) }} +    {{ search_macros.query_option(query.availability_options, query.filter_availability) }} +    {{ search_macros.query_option(query.sort_options, query.sort_order) }} +    </p> +  </details> + +  {% if hits %} +    {# <h2>{{ "{:,}".format(hits.count_found) }}</h2> #} +    <span style="font-size: 1.5em;">{{ "{:,}".format(hits.count_found) }}</span> +    Hits +    <span style="color: rgba(0,0,0,0.4);">in {{ "{:0.2}".format(hits.query_time_ms/1000.0) }}sec</span> +  {% endif %} +</div> + +<div class="ui equal height stackable divided grid" style="margin-top: 1em;"> + +  <div class="ui mobile-hide two wide column">      {% if hits %} -    <div style="width: 100%; text-align: right;"> -      {# <h2>{{ "{:,}".format(hits.count_found) }}</h2> #} -      <h3 style="font-size: {% if hits.count_found >= 10000000 %}1.0em{% elif hits.count_found >= 1000 %}1.5em{% else %}2.0em{% endif %};">{{ "{:,}".format(hits.count_found) }}</h3> -      Hits -    </div> -    <div style="text-align: right;"> -      <span style="color: rgba(0,0,0,0.4);">in {{ "{:0.2}".format(hits.query_time_ms/1000.0) }}sec</span> -    </div> -    <div class="ui clearing divider"></div> +      <div style="width: 100%; text-align: right;"> +        {# <h2>{{ "{:,}".format(hits.count_found) }}</h2> #} +        <h3 style="font-size: {% if hits.count_found >= 10000000 %}1.0em{% elif hits.count_found >= 1000 %}1.5em{% else %}2.0em{% endif %};">{{ "{:,}".format(hits.count_found) }}</h3> +        Hits +      </div> +      <div style="text-align: right;"> +        <span style="color: rgba(0,0,0,0.4);">in {{ "{:0.2}".format(hits.query_time_ms/1000.0) }}sec</span> +      </div> +      <div class="ui clearing divider"></div>      {% endif %}      <div style="text-align: right;"> @@ -25,20 +45,39 @@      </div>    </div> -  <div class="ui thirteen wide column"> + +  <div class="ui fourteen wide column">      {% if search_error %}        <div class="ui error message">          <div class="header">Query Error</div>          <p>{{ search_error }}</p>        </div> -    {% elif hits %} +    {% elif hits and hits.results %}        {% if hits.results %}          {% for paper in hits.results %}            {{ search_macros.fulltext_search_result_row(paper) }}          {% endfor %}        {% endif %} +    {% elif hits %} +      <div class="ui placeholder segment" style="height: 100%;"> +        <div class="ui icon header"> +          <i class="search icon"></i> +          We didn't find any documents matching your query +        </div> +        <div class="inline"> +          <a href="https://archive.org/search.php?sin=TXT&query={{ query.q|urlencode }}" class="ui button" style="margin: 0.5em;">Try archive.org</a> +          <a href="https://fatcat.wiki/search&q={{ query.q|urlencode }}" class="ui button" style="margin: 0.5em;">Try fatcat.wiki</a> +          <a href="https://www.semanticscholar.org/search?q={{ query.q|urlencode }}" class="ui button" style="margin: 0.5em;">Try Semantic Scholar</a> +          <a href="https://scholar.google.com/scholar?q={{ query.q|urlencode }}" class="ui button" style="margin: 0.5em;">Try Google Scholar</a> +        </div> +      </div>      {% else %} -    No search submitted? Some message should go here. +      <div class="ui placeholder segment" style="height: 100%;"> +        <div class="ui icon header"> +          <i class="search icon"></i> +          Enter a query in the box above to get started +        </div> +      </div>      {% endif %}    </div>  </div> diff --git a/fatcat_scholar/templates/search_macros.html b/fatcat_scholar/templates/search_macros.html index bb96b61..b1ccc69 100644 --- a/fatcat_scholar/templates/search_macros.html +++ b/fatcat_scholar/templates/search_macros.html @@ -141,18 +141,18 @@    </div>  </div> -<div class="three wide left aligned column" style="padding-top: 0em; padding-right: 0em;"> +<div class="three wide left aligned column" style="padding-top: 0em; padding-right: 0.5em;">    {% if paper.fulltext.access_url %}        {# <img src="{{ settings.COVID19_FULLTEXT_HOST }}{{ paper.fulltext.thumbnail_url }}" style="border: 1px solid grey; max-height: 12em; max-width: 100%;"> #}      {% if paper.fulltext.thumbnail_url %} -      <div class="ui card" style="margin-bottom: 0.4em;"> +      <div class="ui card" style="margin-bottom: 0.2em;">          <a class="image" href="{{ paper.fulltext.access_url}}">            <img src="{{ paper.fulltext.thumbnail_url }}">          </a>        </div>      {% endif %}      <a href="{{ paper.fulltext.access_url}}"> -      <div style="width: 100%; padding-left: 0.5em; padding-right: 0.5em; opacity: 0.5; text-align: center;"> +      <div style="width: 100%; opacity: 0.65; text-align: center;">          {# TODO: could have other hover info, like mimetype icon and file size? #}          <span>          {% if paper.fulltext.access_type == "wayback" %} | 
