Improve appearance of option bars on mobile
This commit is contained in:
		
							parent
							
								
									b2a35c469a
								
							
						
					
					
						commit
						7e4116359a
					
				| 
						 | 
				
			
			@ -7724,16 +7724,24 @@ header #login-popup {
 | 
			
		|||
  flex-direction: column;
 | 
			
		||||
  justify-content: space-between;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
  border-style: dashed;
 | 
			
		||||
  border-width: 0px;
 | 
			
		||||
  border-bottom-width: 1px; }
 | 
			
		||||
  border-bottom-width: 1px;
 | 
			
		||||
  padding-bottom: 0.5rem; }
 | 
			
		||||
  @media screen and (min-width: 30em) {
 | 
			
		||||
    .optionbar {
 | 
			
		||||
      flex-direction: row;
 | 
			
		||||
      text-align: left; } }
 | 
			
		||||
      text-align: left;
 | 
			
		||||
      padding-bottom: 0; } }
 | 
			
		||||
  .optionbar.bottom {
 | 
			
		||||
    border-bottom-width: 0px;
 | 
			
		||||
    border-top-width: 1px; }
 | 
			
		||||
    border-top-width: 1px;
 | 
			
		||||
    padding-bottom: 0;
 | 
			
		||||
    padding-top: 0.5rem; }
 | 
			
		||||
    @media screen and (min-width: 30em) {
 | 
			
		||||
      .optionbar.bottom {
 | 
			
		||||
        padding-top: 0; } }
 | 
			
		||||
  .optionbar.center {
 | 
			
		||||
    text-align: center; }
 | 
			
		||||
  .optionbar .options {
 | 
			
		||||
| 
						 | 
				
			
			@ -7748,6 +7756,8 @@ header #login-popup {
 | 
			
		|||
    .optionbar .options input[type=button],
 | 
			
		||||
    .optionbar .options input[type=submit] {
 | 
			
		||||
      display: inline-flex;
 | 
			
		||||
      align-items: center;
 | 
			
		||||
      justify-content: center;
 | 
			
		||||
      border: none;
 | 
			
		||||
      background: none;
 | 
			
		||||
      font-weight: normal;
 | 
			
		||||
| 
						 | 
				
			
			@ -8432,6 +8442,8 @@ input[type=submit] {
 | 
			
		|||
  input[type=button].lite,
 | 
			
		||||
  input[type=submit].lite {
 | 
			
		||||
    display: inline-flex;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    justify-content: center;
 | 
			
		||||
    border: none;
 | 
			
		||||
    background: none;
 | 
			
		||||
    font-weight: normal;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -639,18 +639,27 @@ footer {
 | 
			
		|||
  flex-direction: column;
 | 
			
		||||
  justify-content: space-between;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
  border-style: dashed;
 | 
			
		||||
  border-width: 0px;
 | 
			
		||||
  border-bottom-width: 1px;
 | 
			
		||||
  padding-bottom: $spacing-small;
 | 
			
		||||
 | 
			
		||||
  @media #{$breakpoint-not-small} {
 | 
			
		||||
    flex-direction: row;
 | 
			
		||||
    text-align: left;
 | 
			
		||||
    padding-bottom: 0;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  &.bottom {
 | 
			
		||||
    border-bottom-width: 0px;
 | 
			
		||||
    border-top-width: 1px;
 | 
			
		||||
    padding-bottom: 0;
 | 
			
		||||
    padding-top: $spacing-small;
 | 
			
		||||
 | 
			
		||||
    @media #{$breakpoint-not-small} {
 | 
			
		||||
      padding-top: 0;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  &.center {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -46,6 +46,8 @@ will throw an error.
 | 
			
		|||
 | 
			
		||||
@mixin lite-button {
 | 
			
		||||
  display: inline-flex;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
  justify-content: center;
 | 
			
		||||
  border: none;
 | 
			
		||||
  background: none;
 | 
			
		||||
  font-weight: normal;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,9 +1,9 @@
 | 
			
		|||
{{- /*gotype: git.handmade.network/hmn/hmn/src/templates.Pagination*/ -}}
 | 
			
		||||
<div class="pagination flex">
 | 
			
		||||
    {{ if gt .Current 1 }}
 | 
			
		||||
        <a class="button" href="{{ .PreviousUrl }}">Prev</a>
 | 
			
		||||
    {{ end }}
 | 
			
		||||
    {{ if gt .Total 1 }}
 | 
			
		||||
{{ if gt .Total 1 }}
 | 
			
		||||
    <div class="pagination flex">
 | 
			
		||||
        {{ if gt .Current 1 }}
 | 
			
		||||
            <a class="button" href="{{ .PreviousUrl }}">Prev</a>
 | 
			
		||||
        {{ end }}
 | 
			
		||||
        {{ if gt .Current 1 }}
 | 
			
		||||
            {{ if gt .Current 2 }}
 | 
			
		||||
                <a class="page button" href="{{ .FirstUrl }}">1</a>
 | 
			
		||||
| 
						 | 
				
			
			@ -23,10 +23,8 @@
 | 
			
		|||
                <a class="page button" href="{{ .LastUrl }}">{{ .Total }}</a>
 | 
			
		||||
            {{ end }}
 | 
			
		||||
        {{ end }}
 | 
			
		||||
    {{ else }}
 | 
			
		||||
         
 | 
			
		||||
    {{ end }}
 | 
			
		||||
    {{ if lt .Current .Total }}
 | 
			
		||||
        <a class="button" href="{{ .NextUrl }}">Next</a>
 | 
			
		||||
    {{ end }}
 | 
			
		||||
</div>
 | 
			
		||||
        {{ if lt .Current .Total }}
 | 
			
		||||
            <a class="button" href="{{ .NextUrl }}">Next</a>
 | 
			
		||||
        {{ end }}
 | 
			
		||||
    </div>
 | 
			
		||||
{{ end }}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue