Fix #63 center alignment and fix #31 flexbox replacement
Change-Id: Ib043d933a2b378974cf7bec6439685e452f2716c
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index c451231..76fb330 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -23,14 +23,28 @@
font-size: $font-size;
> li {
- display: table-row;
- table-layout: auto;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: stretch;
+ align-content: stretch;
+
div.meta {
position: relative;
- display: table-cell;
+ flex: 1 0;
+ min-width: 12em;
+ max-width: 15em;
+
+ // Tiny hack
+ &:before {
+ content:" ";
+ display:inline-block;
+ height:100%;
+ vertical-align:middle;
+ }
+
text-align: left;
- vertical-align: middle;
- cursor: initial;
+ // cursor: initial;
width: 2px;
z-index: 5;
overflow-y: hidden;
@@ -81,8 +95,11 @@
&:nth-of-type(even) div.main-col {
*/
div.match-main {
- display: table-cell;
+ display: block;
+ flex: 7 0;
z-index: 4;
+ overflow: hidden;
+
> div.match-wrap {
width: 99999%;
margin-left: -49999.5%;
@@ -104,13 +121,15 @@
text-indent: 0;
text-shadow: $light-shadow;
font-size: 0;
+ white-space: nowrap !important;
+
> span, mark {
padding: 5pt 0 6pt 0;
font-size: $font-size;
// white-space: nowrap;
- > span {
+ // > span {
// white-space: nowrap;
- }
+ // }
}
> mark, > span.match {
font-weight: bold;
@@ -137,7 +156,6 @@
}
#search {
-
li.active div.matchinfo {
display: block;
}
@@ -154,6 +172,7 @@
+/*
#search div.match-main {
position: relative;
z-index: 4;
@@ -166,6 +185,7 @@
box-sizing: border-box;
}
}
+*/
div.snippet.startMore:before,
div.snippet.endMore:after {
@@ -181,9 +201,7 @@
position: absolute;
height: 100%;
top: 0;
- // margin-left: -49999.5%;
- // margin-left: 50%;
- margin-left: 50%;
+ left: 0;
width: 11px;
background-color: $dark-orange;
border-right-color: $nearly-white;
@@ -196,39 +214,6 @@
#search > ol > li p.ref {
display: none;
-
- // TEMP! Remove
- /*
- > span.meta {
- cursor: pointer;
- @include choose-item;
- margin: $border-size $border-size 0 $border-size !important;
- text-align: center;
- text-decoration: none;
- padding: 0pt 3pt;
- border: {
- width: $border-size;
- style: solid;
- radius: $standard-border-radius;
- }
- &:hover {
- cursor:pointer;
- @include choose-hover;
- }
-
- // color: $nearly-white;
- &::after {
- // font-size: 12pt;
- // font-family: "FontAwesome";
- // content: $fa-metadata;
- content: "+Meta";
- }
-
- > span {
- @include blind;
- }
- }
- */
}
@@ -250,6 +235,10 @@
div.match-main > div.match-wrap {
cursor: default;
}
+ .snippet {
+ white-space: normal !important;
+ }
+
.snippet span {
display: inline !important;
}
@@ -259,6 +248,7 @@
div.match-wrap {
min-height: 20pt;
div.snippet {
+
background-color: $light-orange;
> * {
background-color: transparent;
@@ -323,17 +313,17 @@
}
}
-
-
-/**
- * Right aligned
- */
#search ol span.context-left {
display: inline-block;
width: 50.01%;
text-align: right;
}
+
+/**
+ * Right aligned
+ */
+
#search ol.align-right {
text-align: right;
@@ -344,78 +334,36 @@
}
}
-// Complete margin, see main.scss
-// TODO:
-// This, however, needs to be adjusted for embedded views
-// and media!
-$complete-margin: $right-distance + ($standard-margin / 2) + (2 * $result-border-size);
-
-
/**
* Center aligned
*/
#search ol.align-center {
- display: table;
- width: 100%;
- max-width: 100%;
- table-layout: fixed;
+ div.match-main {
+ width: 100% !important;
- li.active {
- /*
- display: table-caption !important;
- caption-side: inherit;
- */
-
- display: block;
- max-width: calc(100vw - #{$complete-margin});
- width: calc(100vw - #{$complete-margin});
-
+ > .match-wrap {
+ margin-left: 0;
+ position: relative;
+ }
}
-
- li:not(.active) {
- div.meta {
- width: 13vw;
- min-width: 12em;
- max-width: 12em;
+ li:not(.active) div.snippet {
+ white-space: normal;
+ text-align: center;
+ width: 100000pt;
+ margin-left: -50000pt;
+
+ span.context-left {
+ display: inline-block;
+ text-align: right;
+ width: 40000pt;
+ margin-left: 70vw;
}
- .match-main {
-
- div.flag {
- margin-left: 50%;
- }
-
- > .match-wrap {
- margin-left: 0;
- width: 100% !important;
- }
-
- .snippet {
- position: initial;
- display: inline-block;
- left: 50%;
- transform: translateX(-50%);
- overflow-x: hidden;
- white-space: nowrap !important;
-
- > mark, span.match {
- display: inline-block;
- }
-
- span.context-left {
- display: inline-block;
- text-align: right;
- width: 80000px;
- margin-left: 70vw;
- }
-
- span.context-right {
- display: inline-block;
- text-align: left;
- width: 80000px;
- }
- }
+ span.context-right {
+ display: inline-block;
+ text-align: left;
+ width: 40000pt;
}
}
}