Changeset - e340b7010cb6
[Not reviewed]
0 5 0
Ben Sturmfels (bsturmfels) - 2 years ago 2021-10-19 13:47:58
ben@sturm.com.au
Add mobile menu and DuckDuckGo-based search.
5 files changed with 84 insertions and 15 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/conservancy.css
Show inline comments
...
 
@@ -58,29 +58,31 @@ a:hover { text-decoration: underline; }
 

	
 
/* Missing links */
 
a, form { position: relative; }
 
.fixme,
 
a[href$="#fixme"]:before,
 
form[action$="#fixme"]:before {
 
  border: 1px solid purple;
 
  border-radius: 2px;
 
  content: 'FIXME';
 
  font-size: 0.55rem;
 
  color: purple;
 
  border: 1px solid var(--orange);
 
  border-radius: 6px;
 
  content: '?';
 
  font-size: 0.6rem;
 
  color: var(--orange);
 
  position: absolute;
 
  top: -5px;
 
  right: -5px;
 
  top: -4px;
 
  right: -4px;
 
  padding: 1px;
 
  background: yellow;
 
  opacity: 0.8;
 
  /* opacity: 0.8; */
 
  width: 12px;
 
  text-align: center;
 
}
 

	
 
input:focus {
 
  z-index: 3;
 
  border-color: #86b7fe;
 
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
 
  box-shadow: 0 0 0 .25rem rgb(236, 99, 67, .5);
 
};
 

	
 

	
 
a.read-more {
 
    cursor: pointer;
 
    font-style: italic;
...
 
@@ -178,12 +180,13 @@ body > header {
 
/* Navigation bar */
 
#navbar-outer {
 
  background: var(--navy);
 
}
 
#navbar ul {
 
  list-style: none;
 
  text-transform: uppercase;
 
  padding: 0;
 
}
 
#navbar li {
 
  background: var(--navy);
 
  position: relative;
 
  padding-left: .25rem;
...
 
@@ -223,12 +226,13 @@ body > header {
 
  display: none;
 
  z-index: 100;
 
  position: absolute;
 
  top: 100%;
 
  left: 0;
 
  min-width: 15rem;
 
  text-transform: none;
 
}
 
#navbar li ul a {
 
  font-weight: normal;
 
}
 
#navbar li:hover ul {
 
  display: block;
...
 
@@ -237,12 +241,45 @@ body > header {
 
#navbar li:nth-last-child(2) ul, #navbar li:nth-last-child(1) ul {
 
  left: auto;
 
  right: 0;
 
  text-align: right;
 
}
 

	
 
#menu-icon:active, #search-icon:active {
 
  transform: scale(1.1);
 
}
 
#navbar-outer { min-height: .5rem; }
 
#navbar.mobile {
 
  display: block;
 
  max-width: 32rem;
 
}
 
#navbar.mobile.search { display: block; }
 
#navbar.mobile li {
 
  display: block;
 
}
 
#navbar.mobile ul {
 
  padding-left: .5rem;
 
  padding-right: .5rem;
 
  display: block !important;
 
  position: relative !important;
 
  top: auto !important;
 
  left: 0 !important;
 
  right: auto !important;
 
  text-align: left !important;
 
}
 
#navbar.mobile > ul > li {
 
  padding-top: .5rem;
 
  padding-bottom: .5rem;
 
}
 
#navbar.mobile > ul > li {
 
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 
}
 
#navbar.mobile li ul {
 
  margin-left: .5rem;
 
}
 

	
 

	
 
#mainContent {
 
  overflow: auto;
 
}
 
#sidebar + #mainContent {
 
    float: left;
www/conservancy/static/img/font_awesome.svg
Show inline comments
...
 
@@ -19,7 +19,16 @@ License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL
 
  <symbol id="rss-square" viewBox="0 0 448 512">
 
    <path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634-5.214-80.05-69.243-143.92-149.123-149.123-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425 110.546 5.974 198.997 94.536 204.964 204.964.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432 167.83 6.025 302.21 141.191 308.205 308.205.232 6.449-4.978 11.787-11.432 11.787z"></path>
 
  </symbol>
 
  <symbol id="envelope" viewBox="0 0 512 512">
 
    <path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path>
 
  </symbol>
 
  <symbol id="bars" viewBox="0 0 448 512">
 
    <path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
 
  </symbol>
 
  <symbol id="heart" viewBox="0 0 512 512">
 
    <path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path>
 
  </symbol>
 
  <symbol id="search" viewBox="0 0 512 512">
 
    <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
 
  </symbol>
 
</svg>
www/conservancy/static/js/conservancy.js
Show inline comments
...
 
@@ -97,7 +97,14 @@ $(document).ready(function() {
 
        if (wantShirt) {
 
            $tShirtSelector.slideDown(duration);
 
        } else {
 
            $tShirtSelector.slideUp(duration);
 
        }
 
    }).filter(':checked').trigger('change', 0);
 

	
 
    function toggleMenu(event) {
 
        $('#navbar').toggleClass('mobile');
 
        $('#search-query').focus();
 
    }
 
    $('#menu-icon').on('click', toggleMenu);
 
    $('#search-icon').on('click', toggleMenu);
 
});
www/conservancy/templates/base_conservancy.html
Show inline comments
...
 
@@ -36,38 +36,53 @@
 
              <img src="{% static 'img/conservancy-header.svg' %}" alt="Software Freedom Conservancy" class="db center mh3-ns" />
 
            </a>
 
          </h1>
 
        </div>
 

	
 
        <div class="w-40-ns mt2 mt4-ns mb2 mb2-ns mh2 pt1 flex flex-wrap justify-center items-center">
 
          <span id="menu-icon" class="dn-ns ph2 pointer">
 
            <svg style="color: var(--orange); width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#bars"></use></svg>
 
          </span>
 
          <a href="/donate/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Donate</a>
 
          <a href="/sustainer/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Join</a>
 
          <a href="#fixme" class="f5 mh1 mv1 ph2 pv1 mr2 ttu b btn-white">Special</a>
 
          <a href="#fixme" class="f5 mh1 mv1 ph2 pv1 ttu b btn-white">Special</a>
 
          <span id="search-icon" class="dib ph2 pointer">
 
            <svg style="color: var(--orange); width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#search"></use></svg>
 
          </span>
 
        </div>
 
      </div>
 
    </header>
 

	
 
    <div id="navbar-outer" class="mb2">
 
      <div id="navbar" class="center mw8 nested-list-resetb">
 
        <ul class="f5 b ttu flex flex-wrap justify-center">
 
    <div id="navbar-outer" class="mt2 mt0-ns mb2">
 
      <div id="navbar" class="center mw8 nested-list-resetb dn db-ns">
 
        <ul class="f5 ttu flex flex-wrap justify-center">
 
          <!-- Remaining previous menu items
 
          <li class="Projects"><a href="/projects/">Projects</a></li>
 
          <li class="npoacct"><a href="/npoacct/">NPOAcct</a></li>
 
          -->
 

	
 
          <li class="search dn-ns">
 
            <form method="get" action="https://duckduckgo.com" class="ml2 flex mw6">
 
              <input id="search-query" type="text" name="q" placeholder="Search with DuckDuckGo" class="pa2 ba b--gray br0" style="x-border-right: none; flex: 1 1 auto; width: 1%;" />
 
              <input type="hidden" name="sites" value="sfconservancy.org" />
 
              <button type="submit" class="bg-orange bn white pa2 pointer btn-orange" style="margin-left: -1px;">
 
                <svg style="color: white; width: 20px; height: 20px;"><use href="{% static 'img/font_awesome.svg' %}#search"></use></svg></a>
 
              </button>
 
    </form>
 
          </li>
 
          <li class="home dn db-ns"><a href="/">Home</a></li>
 
          <li class="what"><a href="#fixme">What <span class="dn di-ns">we do</span></a>
 
          <li class="what"><a href="#fixme">What we do</a>
 
            <ul>
 
              <li><a href="#fixme">Member Projects</a></li>
 
              <li><a href="/copyleft-compliance/">Copyleft Compliance</a></li>
 
              <li><a href="#fixme">Special</a></li>
 
              <li><a href="#fixme">Public Filings</a></li>
 
              <li><a href="#fixme">FAQs</a></li>
 
            </ul>
 
          </li>
 
          <li class="who"><a href="#fixme">Who <span class="dn di-ns">we are</span></a>
 
          <li class="who"><a href="#fixme">Who we are</a>
 
            <ul>
 
              <li><a href="/sponsors/">Sponsors</a></li>
 
              <li><a href="/sustainer/">Sustainers</a></li>
 
              <li><a href="#fixme">Board of Directors</a></li>
 
              <li><a href="#fixme">Staff</a></li>
 
              <li><a href="#fixme">Evaluation Committee</a></li>
www/conservancy/templates/frontpage.html
Show inline comments
...
 
@@ -11,12 +11,13 @@
 
   /* Hide the <hr> elements in the list of news and blog items. */
 
   display: none;
 
 }
 

	
 
 .date {
 
   font-size: 1em;
 
   font-style: normal;
 
   margin-top: 0;
 
 }
 

	
 
 .press-release h3, .blog-entry h3 {
 
   margin-bottom: 0;
 
 }
0 comments (0 inline, 0 general)