Actions

Widget

Difference between revisions of "TimelineTest"

From ThornsWiki

Line 123: Line 123:
 
data-group="TimelineEntry"
 
data-group="TimelineEntry"
 
data-path=".DateSort"
 
data-path=".DateSort"
data-order="desc"
+
data-order="asc"
 
data-type="text">
 
data-type="text">
</div>
 
 
<!-- checkbox filter control Year -->
 
<label>
 
<input
 
type="checkbox"
 
data-jplist-control="checkbox-text-filter"
 
data-path=".Year"
 
data-group="TimelineEntry"
 
data-name="year"
 
value="2718"
 
checked />
 
2718
 
</label>
 
 
<label>
 
<input
 
type="checkbox"
 
data-jplist-control="checkbox-text-filter"
 
data-path=".Year"
 
data-group="TimelineEntry"
 
data-name="year"
 
value="2719" />
 
2719
 
</label>
 
 
 
</div>
 
</div>

Revision as of 11:21, 29 April 2020

<style> .sidebar {

       max-width:100%;

margin:0px auto;

       /*padding:15px 10px;*/
       /*background:#e8e4da;*/
       /*position:fixed;*/
       /*top:0;*/
       /*left:0;*/
   }

table tr th.infobox-label {

   text-align: left;
   text-transform: uppercase;
   font-weight: bold;
   font-size: .9em;
   line-height: 1.25em;
   color: #deb975;
   background-color: #474440;
   vertical-align: middle;
   width: 50%;

}

.filters {

           display: flex;
           flex-wrap: wrap;

}

   h3.sort-title {
       font-size: 1.15rem !important;
       border-bottom: 2px solid #474440 !important;
       margin-top: 0px !important;

color:#ccc5b9;

   }

.button-group { flex:1; padding:5px; }

   .button {
       background-color: #deb975;
       border: none;
       border-radius:none !important;
       color: #fffcf2;
       padding: .25rem .35rem;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: .75rem;
       font-family:'Open Sans', sans-serif;
       text-transform:uppercase;
       letter-spacing:0.025rem;
       /*margin: 2px 2px;*/
       -webkit-transition-duration: 0.4s; /* Safari */
       transition-duration: 0.4s;
       cursor: pointer;
       }
   .button.is-checked {
       background:#474440 !important;

}

   .button:hover {
     background-color: #474440;
     color: #fffcf2;
   }
   .grid {
       max-width: 100%;
       display: flex;
       flex-direction: row;
       align-content: space-between;
       flex-wrap: wrap;
       margin: 0px auto;
   }
   
   .grid-item {
       width:30%;

margin:10px;

   }

/* On screens that are 992px wide or less, go from four columns to two columns */ @media screen and (max-width: 992px) {

 .button-group {
   flex: 1;
 }

.grid-item {

       min-width:350px;
       max-width:90%;

}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) {

.button-group {
   flex: 100%;
 }

.grid-item {

       min-width:350px;
       max-width:90%;
   }

}

</style>

<script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>

<script src="http://anaxasdiaries.com/jplist/jplist.min.js"></script> <script> jplist.init(); </script> <body>