Make result buttons a button group and adopt styles
Change-Id: I703de5fcb5f7f19e84278a719a64c19c3bc016cc
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/main/buttongroup.scss
new file mode 100644
index 0000000..607f9e3
--- /dev/null
+++ b/dev/scss/main/buttongroup.scss
@@ -0,0 +1,42 @@
+@charset "utf-8";
+@import "../util";
+
+/*
+ * Define the base layout of horizontal button groups
+ */
+.button-group {
+ > span {
+ cursor: pointer;
+ box-shadow: $choose-box-shadow;
+ font-size: 9pt;
+ line-height: 1.5em;
+ padding: 0 4px;
+ display: inline-block;
+ @include choose-item;
+ border-style: solid;
+ border-width: $border-size 0;
+ &:hover {
+ @include choose-hover;
+ }
+ &:first-child {
+ border: {
+ left-width: $border-size;
+ top-left-radius: $standard-border-radius;
+ bottom-left-radius: $standard-border-radius;
+ }
+ }
+ &:last-child {
+ border: {
+ right-width: $border-size;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ }
+ }
+ &.button-icon {
+ font-family: 'FontAwesome';
+ > span {
+ @include blind;
+ }
+ }
+ }
+}
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index 08a6103..63f143b 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -15,12 +15,11 @@
overflow-x: hidden;
overflow-y: visible;
width: auto;
- border: 1px solid black;
text-indent: 0;
list-style-type: none;
margin: 0;
padding: 0;
- border: 1px solid $kwic-border;
+ border: $result-border-size solid $kwic-border;
font-size: $font-size;
> li {
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 3478a77..40ef483 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -1,16 +1,17 @@
-@import "highlight"; // JSON highlighting
-@import "kwic"; // Kwic view information
-@import "logos"; // Logo images
-@import "matchinfo"; // Match table
-@import "tree"; // Tree view
-@import "pagination"; // Pagination
-@import "query"; // View query
-@import "resultinfo"; // Information on results
-@import "tutorial"; // Embedded and non-embedded tutorial
-@import "koralquery"; // KoralQuery
-@import "tagger"; // Tagger
-@import "alertify";
-@import "intro"; // Intro page
+@import "highlight"; // JSON highlighting
+@import "kwic"; // Kwic view information
+@import "logos"; // Logo images
+@import "matchinfo"; // Match table
+@import "tree"; // Tree view
+@import "pagination"; // Pagination
+@import "query"; // View query
+@import "resultinfo"; // Information on results
+@import "tutorial"; // Embedded and non-embedded tutorial
+@import "koralquery"; // KoralQuery
+@import "tagger"; // Tagger
+@import "alertify"; // Styling alerts
+@import "intro"; // Intro page
+@import "buttongroup"; // Button groups
main {
margin: {
diff --git a/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
index 5276f0a..0ad4fc1 100644
--- a/dev/scss/main/resultinfo.scss
+++ b/dev/scss/main/resultinfo.scss
@@ -16,73 +16,46 @@
margin: 0;
text-align: right;
}
+}
- div.result {
- vertical-align: bottom;
- display: inline-block;
+// Specify result button group layout
+.result.button-group {
+ vertical-align: bottom;
+ display: inline-block;
+ line-height: 1.3em;
+
+ > span {
line-height: 1.3em;
- > a {
- display: inline-block;
- cursor: pointer;
- position: relative;
- > span {
- @include blind;
- }
- box-shadow: $choose-box-shadow;
- @include standard-text-padding;
- // padding-top: 1pt;
- // padding-bottom: 3pt;
-
- @include choose-item;
- border: {
- top-width: $border-size;
- bottom-width: $border-size;
- top-style: solid;
- bottom-style: solid;
- }
- &:hover {
- @include choose-hover;
- }
+ border-width: $result-border-size 0;
+ &:first-child {
+ border-left-width: $result-border-size;
}
- > a:last-child {
- border: {
- top-right-radius: $standard-border-radius;
- bottom-right-radius: $standard-border-radius;
- right-width: $border-size;
- right-style: solid;
+ &:last-child {
+ border-right-width: $result-border-size;
}
- }
- > a:first-child {
- border: {
- top-left-radius: $standard-border-radius;
- bottom-left-radius: $standard-border-radius;
- left-width: $border-size;
- left-style: solid;
- }
- }
- > a::after {
- font-family: 'FontAwesome';
- }
- > a.align.left::after {
+ }
+
+ // Define icons for result buttons
+ .button-icon {
+ &.align.left::after {
content: $fa-left-align;
}
- > a.align.right::after {
+ &.align.right::after {
content: $fa-right-align;
}
- > a.show-kq::after {
+ &.show-kq::after {
content: $fa-code;
}
- > a.show-meta::after {
- content: $fa-metadata;
- }
}
}
+
#resultinfo.found {
position: relative;
// z-index: 20;
margin-bottom: 0px;
- div.result > a {
+
+ .button-group > span {
margin-bottom: 0;
border-bottom-width: 0;
box-shadow: none;
@@ -91,15 +64,20 @@
}
&:last-child {
border-bottom-right-radius: 0;
- }
+ }
}
+
+ /*
div.result.left {
position: absolute;
left: 0;
bottom: 0;
}
+ */
}
+
+
#total-results {
color: $total-results;
font-weight: bold;