diff options
author | Erlend <erlendniko@hotmail.com> | 2022-06-22 16:56:07 +0200 |
---|---|---|
committer | Erlend <erlendniko@hotmail.com> | 2022-06-22 16:56:07 +0200 |
commit | 3fd809ea75c8e0bbf6ad7091e98a672d4cce5bf4 (patch) | |
tree | 35442bc9df0ecd28f7f888206eefbbb707cf8950 /client/js | |
parent | cf69cd55229fedeaa337ea071cf5d20e1c0463dd (diff) |
qeury input now gets saved correctly
Diffstat (limited to 'client/js')
8 files changed, 1681 insertions, 75 deletions
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx index e7af732bdca..e6cd623fea7 100644 --- a/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx +++ b/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx @@ -7,7 +7,6 @@ export default function Info({ height = 15, width = 15, }) { - //const image = require("../../assets/img/information.svg").default; return ( <> <a diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx index 85e7f5bfc0c..9d78a8accde 100644 --- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx +++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx @@ -5,17 +5,19 @@ import SimpleDropDownForm from './SimpleDropDownForm'; export default function QueryDropdownFormn({ choices, id }) { const { inputs, setInputs } = useContext(QueryInputContext); - const updateInputs = (e) => { + const updateType = (e) => { e.preventDefault(); const index = inputs.findIndex((element) => element.id === id); inputs[index].type = e.target.value; setInputs(inputs); }; + //TODO: Try to move this into SimpleDropDownForm + return ( <SimpleDropDownForm id={id} - onChange={updateInputs} + onChange={updateType} choices={choices} ></SimpleDropDownForm> ); diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx index 2132756db0c..c645cd86cd5 100644 --- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx +++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx @@ -6,7 +6,7 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap'; import { QueryInputContext } from '../Contexts/QueryInputContext'; import QueryDropdownFormn from './QueryDropDownForm'; -export default function QueryInput({ id, onClick }) { +export default function QueryInput({ id }) { const choices = ['yql', 'hits', 'offset', 'tracelevel']; const { inputs, setInputs } = useContext(QueryInputContext); @@ -16,6 +16,15 @@ export default function QueryInput({ id, onClick }) { setInputs(newList); } + const updateInput = (e) => { + e.preventDefault(); + const id = parseInt(e.target.id.replace('v', '')); + const index = inputs.findIndex((element) => element.id === id); + inputs[index].input = e.target.value; + setInputs(inputs); + console.log(inputs); + }; + const inputList = inputs.map((value, index) => { return ( <div key={value.id} id={value.id} className="queryinput"> @@ -23,9 +32,12 @@ export default function QueryInput({ id, onClick }) { choices={choices} id={value.id} ></QueryDropdownFormn> - {/* <SimpleDropDownForm choices={choices} id={`i${value.id}`}></SimpleDropDownForm> */} <Info id={value.id} height="15" width="15"></Info> - <SimpleForm id={`v${value.id}`} size="30"></SimpleForm> + <SimpleForm + id={`v${value.id}`} + size="30" + onChange={updateInput} + ></SimpleForm> <OverlayTrigger placement="right" delay={{ show: 250, hide: 400 }} diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.jsx index 1b5935cb9cf..ed48eaf06ae 100644 --- a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.jsx +++ b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.jsx @@ -6,18 +6,26 @@ export default function SimpleForm({ className = 'propvalue', initial, size = '20', + onChange, }) { + SimpleForm.defaultProps = { + onChange: handleChange, + }; const [input, setValue] = useState(initial); + function handleChange(e) { + setValue(e.target.value); + } + return ( - <form className={className}> + <form className={className} id={id}> <input size={size} type="text" id={id} className={className} - value={input} - onChange={(e) => setValue(e.target.value)} + defaultValue={initial} + onChange={onChange} /> </form> ); diff --git a/client/js/app/src/app/pages/querybuilder/index.js b/client/js/app/src/app/pages/querybuilder/index.js deleted file mode 100644 index de40d0c2174..00000000000 --- a/client/js/app/src/app/pages/querybuilder/index.js +++ /dev/null @@ -1,63 +0,0 @@ -import "./css/agency.css"; -import "./css/vespa.css" -import "bootstrap/dist/css/bootstrap.min.css"; -import "./font-awesome/css/font-awesome.min.css"; - -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import SimpleButton from 'Components/Buttons/SimpleButton'; -import QueryInput from 'Components/Text/QueryInput'; -import SimpleDropDownForm from 'Components/Text/SimpleDropDownForm'; -import SimpleForm from 'Components/Text/SimpleForm'; -import TextBox from 'Components/Text/TextBox'; -import ImageButton from "Components/Buttons/ImageButton"; -import OverlayImageButton from "Components/Buttons/OverlayImageButton"; -import AddQueryInput from "Components/Buttons/AddQueryInputButton"; -import { QueryInputProvider } from "Components/Contexts/QueryInputContext"; - - - -const root = ReactDOM.createRoot(document.getElementById('root')); -const messageMethodArray = ["POST", "GET"]; - -const pasteImage = require("./assets/img/paste.svg").default; -const copyImage = require("./assets/img/copy.svg").default; -const refreshImage = require("./assets/img/reload.svg").default; - - -root.render( - <> - <React.StrictMode> - <header> - <div className="intro container"> - <TextBox className={"intro-lead-in"}>Vespa Search Engine</TextBox> - <TextBox className={"intro-long"}>Select the method for sending a request and construct a query.</TextBox> - <SimpleDropDownForm choices={messageMethodArray} id="method" className='methodselector'></SimpleDropDownForm> - <SimpleForm id="url" className='textbox' initial="http://localhost:8080/search/" size="30"></SimpleForm> - <SimpleButton id="send" className="button" onClick={handleClick}>Send</SimpleButton> - <br/> - <QueryInputProvider> - <div id="request"> - <QueryInput></QueryInput> - </div> - <br/> - <AddQueryInput/> - </QueryInputProvider> - <br/> - <ImageButton id="pasteJSON" className="pasteJSON" showImage={true} image={pasteImage} style={{marginTop:"-2px", marginRight: "3px"}}>Paste JSON</ImageButton> - <SimpleButton className="showJSON">Show query JSON</SimpleButton> - <TextBox className="response">Response</TextBox> - <textarea className="responsebox" readOnly cols="70" rows="25"></textarea> - <OverlayImageButton className="intro-copy" image={copyImage} height="30" width="30" tooltip="Copy">Copy</OverlayImageButton> - <OverlayImageButton className="intro-refresh" image={refreshImage} height="30" width="30" tooltip="Refresh">Refresh</OverlayImageButton> - <br/> - <br/> - </div> - </header> - </React.StrictMode> - </> -); - -function handleClick() { - console.log("Click happened"); -} diff --git a/client/js/app/src/app/pages/querybuilder/query-builder.jsx b/client/js/app/src/app/pages/querybuilder/query-builder.jsx index c89d668fa34..1d6741770d0 100644 --- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx +++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx @@ -12,12 +12,13 @@ import pasteImage from './assets/img/paste.svg'; import copyImage from './assets/img/copy.svg'; import refreshImage from './assets/img/reload.svg'; +import '../../styles/agency.css'; +import '../../styles/vespa.css'; +//import 'bootstrap/dist/css/bootstrap.min.css'; //TODO: Find out how to get this css + export function QueryBuilder() { const messageMethodArray = ['POST', 'GET']; - // const pasteImage = require("./assets/img/paste.svg").default; - // const copyImage = require("./assets/img/copy.svg").default; - // const refreshImage = require("./assets/img/reload.svg").default; return ( <> <header> diff --git a/client/js/app/src/app/styles/agency.css b/client/js/app/src/app/styles/agency.css new file mode 100644 index 00000000000..e17809338c6 --- /dev/null +++ b/client/js/app/src/app/styles/agency.css @@ -0,0 +1,895 @@ +/*! + * Start Bootstrap - Agency Bootstrap Theme (http://startbootstrap.com) + * Code licensed under the Apache License v2.0. + * For details, see http://www.apache.org/licenses/LICENSE-2.0. + */ +:root { + --primary: #188fff; + --secondary: #003abc; + --secondary-dark: #333; + --muted: #777; + + --fontprimary: HelveticaNeue, Helvetica, Arial, sans-serif; + --fontsecondary: HelveticaNeue-Thin, Helvetica, Arial, sans-serif; +} + +body { + overflow-x: hidden; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; + color: var(--secondary-dark); +} + +.text-muted { + color: var(--muted); +} + +.text-primary { + color: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +p { + font-size: 14px; + line-height: 1.75; +} + +p.large { + font-size: 16px; +} + +a, +a:hover, +a:focus, +a:active, +a.active { + outline: 0; +} + +a { + color: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +a:hover, +a:focus, +a:active, +a.active { + color: HelveticaNeue-Thin, Helvetica, Arial, sans-serif; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + text-transform: uppercase; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; + font-weight: 700; +} + +.img-centered { + margin: 0 auto; +} + +.bg-light-gray { + background-color: #f7f7f7; +} + +.bg-darkest-gray { + background-color: #222; +} + +.btn-primary { + border-color: HelveticaNeue, Helvetica, Arial, sans-serif; + text-transform: uppercase; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; + font-weight: 700; + color: #fff; + background-color: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active, +.btn-primary.active, +.open .dropdown-toggle.btn-primary { + border-color: HelveticaNeue, Helvetica, Arial, sans-serif; + color: #fff; + background-color: HelveticaNeue-Thin, Helvetica, Arial, sans-serif; +} + +.btn-primary:active, +.btn-primary.active, +.open .dropdown-toggle.btn-primary { + background-image: none; +} + +.btn-primary.disabled, +.btn-primary[disabled], +fieldset[disabled] .btn-primary, +.btn-primary.disabled:hover, +.btn-primary[disabled]:hover, +fieldset[disabled] .btn-primary:hover, +.btn-primary.disabled:focus, +.btn-primary[disabled]:focus, +fieldset[disabled] .btn-primary:focus, +.btn-primary.disabled:active, +.btn-primary[disabled]:active, +fieldset[disabled] .btn-primary:active, +.btn-primary.disabled.active, +.btn-primary[disabled].active, +fieldset[disabled] .btn-primary.active { + border-color: HelveticaNeue, Helvetica, Arial, sans-serif; + background-color: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +.btn-primary .badge { + color: HelveticaNeue, Helvetica, Arial, sans-serif; + background-color: #fff; +} + +.btn-xl { + padding: 20px 40px; + border-color: HelveticaNeue, Helvetica, Arial, sans-serif; + border-radius: 3px; + text-transform: uppercase; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; + font-size: 18px; + font-weight: 700; + color: #fff; + background-color: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +.btn-xl:hover, +.btn-xl:focus, +.btn-xl:active, +.btn-xl.active, +.open .dropdown-toggle.btn-xl { + border-color: HelveticaNeue, Helvetica, Arial, sans-serif; + color: #fff; + background-color: HelveticaNeue-Thin, Helvetica, Arial, sans-serif; +} + +.btn-xl:active, +.btn-xl.active, +.open .dropdown-toggle.btn-xl { + background-image: none; +} + +.btn-xl.disabled, +.btn-xl[disabled], +fieldset[disabled] .btn-xl, +.btn-xl.disabled:hover, +.btn-xl[disabled]:hover, +fieldset[disabled] .btn-xl:hover, +.btn-xl.disabled:focus, +.btn-xl[disabled]:focus, +fieldset[disabled] .btn-xl:focus, +.btn-xl.disabled:active, +.btn-xl[disabled]:active, +fieldset[disabled] .btn-xl:active, +.btn-xl.disabled.active, +.btn-xl[disabled].active, +fieldset[disabled] .btn-xl.active { + border-color: HelveticaNeue, Helvetica, Arial, sans-serif; + background-color: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +.btn-xl .badge { + color: HelveticaNeue, Helvetica, Arial, sans-serif; + background-color: #fff; +} + +.navbar-default { + border-color: transparent; + background-color: #222; +} + +.navbar-default .navbar-brand { + font-family: 'Kaushan Script', 'Helvetica Neue', Helvetica, Arial, cursive; + color: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +.navbar-default .navbar-brand:hover, +.navbar-default .navbar-brand:focus, +.navbar-default .navbar-brand:active, +.navbar-default .navbar-brand.active { + color: HelveticaNeue-Thin, Helvetica, Arial, sans-serif; +} + +.navbar-default .navbar-collapse { + border-color: rgba(255, 255, 255, 0.02); +} + +.navbar-default .navbar-toggle { + border-color: HelveticaNeue, Helvetica, Arial, sans-serif; + background-color: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +.navbar-default .navbar-toggle .icon-bar { + background-color: #fff; +} + +.navbar-default .navbar-toggle:hover, +.navbar-default .navbar-toggle:focus { + background-color: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +.navbar-default .nav li a { + text-transform: uppercase; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; + font-weight: 400; + letter-spacing: 1px; + color: #fff; + -webkit-transition: all ease 0.35s; + -moz-transition: all ease 0.35s; + transition: all ease 0.35s; +} + +.navbar-default .nav li a:hover, +.navbar-default .nav li a:focus { + outline: 0; + color: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +.navbar-default .navbar-nav > .active > a { + border-radius: 0; + color: #fff; + background-color: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +.navbar-default .navbar-nav > .active > a:hover, +.navbar-default .navbar-nav > .active > a:focus { + color: #fff; + background-color: HelveticaNeue-Thin, Helvetica, Arial, sans-serif; +} + +@media (min-width: 768px) { + .navbar-default { + padding: 25px 0; + border: 0; + background-color: transparent; + -webkit-transition: padding 0.3s; + -moz-transition: padding 0.3s; + transition: padding 0.3s; + } + + .navbar-default .navbar-brand { + font-size: 2em; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + transition: all 0.3s; + } + + .navbar-default .navbar-nav > .active > a { + border-radius: 3px; + } + + .navbar-default.navbar-shrink { + padding: 10px 0; + background-color: #222; + } + + .navbar-default.navbar-shrink .navbar-brand { + font-size: 1.5em; + } +} + +header { + text-align: center; + color: #fff; + background-attachment: scroll; + /*background-image: url('../img/header-bg.png');*/ + background-position: center center; + background-repeat: none; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + -o-background-size: cover; +} + +header .intro-text { + padding-top: 100px; + padding-bottom: 50px; +} + +header .intro-text .intro-lead-in { + margin-bottom: 25px; + font-family: HelveticaNeue-Thin, Helvetica, Arial, sans-serif; + font-size: 22px; + font-style: italic; + line-height: 22px; +} + +header .intro-text .intro-heading { + margin-bottom: 25px; + text-transform: uppercase; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; + font-size: 50px; + font-weight: 700; + line-height: 50px; +} + +@media (min-width: 768px) { + header .intro-text { + padding-top: 300px; + padding-bottom: 200px; + } + + header .intro-text .intro-lead-in { + margin-bottom: 25px; + font-family: HelveticaNeue-Thin, Helvetica, Arial, sans-serif; + font-size: 40px; + font-style: italic; + line-height: 40px; + } + + header .intro-text .intro-heading { + margin-bottom: 50px; + text-transform: uppercase; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; + font-size: 75px; + font-weight: 700; + line-height: 75px; + } +} + +section { + padding: 100px 0; +} + +section h2.section-heading { + margin-top: 0; + margin-bottom: 15px; + font-size: 40px; +} + +section h3.section-subheading { + margin-bottom: 75px; + text-transform: none; + font-family: HelveticaNeue-Thin, Helvetica, Arial, sans-serif; + font-size: 16px; + font-style: italic; + font-weight: 400; +} + +@media (min-width: 768px) { + section { + padding: 150px 0; + } +} + +.service-heading { + margin: 15px 0; + text-transform: none; +} + +#portfolio .portfolio-item { + right: 0; + margin: 0 0 15px; +} + +#portfolio .portfolio-item .portfolio-link { + display: block; + position: relative; + margin: 0 auto; + max-width: 400px; +} + +#portfolio .portfolio-item .portfolio-link .portfolio-hover { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + -webkit-transition: all ease 0.5s; + -moz-transition: all ease 0.5s; + transition: all ease 0.5s; + background: rgba(254, 209, 54, 0.9); /* Fallback when no plugin support */ + background: rgba(var(--primary) | hex_to_rgb | join: ','}}, 0.9); +} + +#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover { + opacity: 1; +} + +#portfolio + .portfolio-item + .portfolio-link + .portfolio-hover + .portfolio-hover-content { + position: absolute; + top: 50%; + width: 100%; + height: 20px; + margin-top: -12px; + text-align: center; + font-size: 20px; + color: #fff; +} + +#portfolio + .portfolio-item + .portfolio-link + .portfolio-hover + .portfolio-hover-content + i { + margin-top: -12px; +} + +#portfolio + .portfolio-item + .portfolio-link + .portfolio-hover + .portfolio-hover-content + h3, +#portfolio + .portfolio-item + .portfolio-link + .portfolio-hover + .portfolio-hover-content + h4 { + margin: 0; +} + +#portfolio .portfolio-item .portfolio-caption { + margin: 0 auto; + padding: 25px; + max-width: 400px; + text-align: center; + background-color: #fff; +} + +#portfolio .portfolio-item .portfolio-caption h4 { + margin: 0; + text-transform: none; +} + +#portfolio .portfolio-item .portfolio-caption p { + margin: 0; + font-family: HelveticaNeue-Thin, Helvetica, Arial, sans-serif; + font-size: 16px; + font-style: italic; +} + +#portfolio * { + z-index: 2; +} + +@media (min-width: 767px) { + #portfolio .portfolio-item { + margin: 0 0 30px; + } +} + +.timeline { + position: relative; + padding: 0; + list-style: none; +} + +.timeline:before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 40px; + width: 2px; + margin-left: -1.5px; + background-color: #f1f1f1; +} + +.timeline > li { + position: relative; + margin-bottom: 50px; + min-height: 50px; +} + +.timeline > li:before, +.timeline > li:after { + content: ' '; + display: table; +} + +.timeline > li:after { + clear: both; +} + +.timeline > li .timeline-panel { + float: right; + position: relative; + width: 100%; + padding: 0 20px 0 100px; + text-align: left; +} + +.timeline > li .timeline-panel:before { + right: auto; + left: -15px; + border-right-width: 15px; + border-left-width: 0; +} + +.timeline > li .timeline-panel:after { + right: auto; + left: -14px; + border-right-width: 14px; + border-left-width: 0; +} + +.timeline > li .timeline-image { + z-index: 100; + position: absolute; + left: 0; + width: 80px; + height: 80px; + margin-left: 0; + border: 7px solid #f1f1f1; + border-radius: 100%; + text-align: center; + color: #fff; + background-color: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +.timeline > li .timeline-image h4 { + margin-top: 12px; + font-size: 10px; + line-height: 14px; +} + +.timeline > li.timeline-inverted > .timeline-panel { + float: right; + padding: 0 20px 0 100px; + text-align: left; +} + +.timeline > li.timeline-inverted > .timeline-panel:before { + right: auto; + left: -15px; + border-right-width: 15px; + border-left-width: 0; +} + +.timeline > li.timeline-inverted > .timeline-panel:after { + right: auto; + left: -14px; + border-right-width: 14px; + border-left-width: 0; +} + +.timeline > li:last-child { + margin-bottom: 0; +} + +.timeline .timeline-heading h4 { + margin-top: 0; + color: inherit; +} + +.timeline .timeline-heading h4.subheading { + text-transform: none; +} + +.timeline .timeline-body > p, +.timeline .timeline-body > ul { + margin-bottom: 0; +} + +@media (min-width: 768px) { + .timeline:before { + left: 50%; + } + + .timeline > li { + margin-bottom: 100px; + min-height: 100px; + } + + .timeline > li .timeline-panel { + float: left; + width: 41%; + padding: 0 20px 20px 30px; + text-align: right; + } + + .timeline > li .timeline-image { + left: 50%; + width: 100px; + height: 100px; + margin-left: -50px; + } + + .timeline > li .timeline-image h4 { + margin-top: 16px; + font-size: 13px; + line-height: 18px; + } + + .timeline > li.timeline-inverted > .timeline-panel { + float: right; + padding: 0 30px 20px 20px; + text-align: left; + } +} + +@media (min-width: 992px) { + .timeline > li { + min-height: 150px; + } + + .timeline > li .timeline-panel { + padding: 0 20px 20px; + } + + .timeline > li .timeline-image { + width: 150px; + height: 150px; + margin-left: -75px; + } + + .timeline > li .timeline-image h4 { + margin-top: 30px; + font-size: 18px; + line-height: 26px; + } + + .timeline > li.timeline-inverted > .timeline-panel { + padding: 0 20px 20px; + } +} + +@media (min-width: 1200px) { + .timeline > li { + min-height: 170px; + } + + .timeline > li .timeline-panel { + padding: 0 20px 20px 100px; + } + + .timeline > li .timeline-image { + width: 170px; + height: 170px; + margin-left: -85px; + } + + .timeline > li .timeline-image h4 { + margin-top: 40px; + } + + .timeline > li.timeline-inverted > .timeline-panel { + padding: 0 100px 20px 20px; + } +} + +.team-member { + margin-bottom: 50px; + text-align: center; +} + +.team-member img { + margin: 0 auto; + border: 7px solid #fff; +} + +.team-member h4 { + margin-top: 25px; + margin-bottom: 0; + text-transform: none; +} + +.team-member p { + margin-top: 0; +} + +aside.clients img { + margin: 50px auto; +} + +section#contact { + background-color: #222; + /* background-image: url('../img/map-image.png'); */ + background-position: center; + background-repeat: no-repeat; +} + +section#contact .section-heading { + color: #fff; +} + +section#contact .form-group { + margin-bottom: 25px; +} + +section#contact .form-group input, +section#contact .form-group textarea { + padding: 20px; +} + +section#contact .form-group input.form-control { + height: auto; +} + +section#contact .form-group textarea.form-control { + height: 236px; +} + +section#contact .form-control:focus { + border-color: HelveticaNeue, Helvetica, Arial, sans-serif; + box-shadow: none; +} + +section#contact::-webkit-input-placeholder { + text-transform: uppercase; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; + font-weight: 700; + color: #bbb; +} + +section#contact:-moz-placeholder { + text-transform: uppercase; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; + font-weight: 700; + color: #bbb; +} + +section#contact::-moz-placeholder { + text-transform: uppercase; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; + font-weight: 700; + color: #bbb; +} + +section#contact:-ms-input-placeholder { + text-transform: uppercase; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; + font-weight: 700; + color: #bbb; +} + +section#contact .text-danger { + color: #e74c3c; +} + +footer { + padding: 25px 0; + text-align: center; +} + +footer span.copyright { + text-transform: uppercase; + text-transform: none; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; + line-height: 40px; +} + +footer ul.quicklinks { + margin-bottom: 0; + text-transform: uppercase; + text-transform: none; + font-family: HelveticaNeue, Helvetica, Arial, sans-serif; + line-height: 40px; +} + +ul.social-buttons { + margin-bottom: 0; +} + +ul.social-buttons li a { + display: block; + width: 40px; + height: 40px; + border-radius: 100%; + font-size: 20px; + line-height: 40px; + outline: 0; + color: #fff; + background-color: #222; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + transition: all 0.3s; +} + +ul.social-buttons li a:hover, +ul.social-buttons li a:focus, +ul.social-buttons li a:active { + background-color: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +.btn:focus, +.btn:active, +.btn.active, +.btn:active:focus { + outline: 0; +} + +.portfolio-modal .modal-content { + padding: 100px 0; + min-height: 100%; + border: 0; + border-radius: 0; + text-align: center; + background-clip: border-box; + -webkit-box-shadow: none; + box-shadow: none; +} + +.portfolio-modal .modal-content h2 { + margin-bottom: 15px; + font-size: 3em; +} + +.portfolio-modal .modal-content p { + margin-bottom: 30px; +} + +.portfolio-modal .modal-content p.item-intro { + margin: 20px 0 30px; + font-family: HelveticaNeue-Thin, Helvetica, Arial, sans-serif; + font-size: 16px; + font-style: italic; +} + +.portfolio-modal .modal-content ul.list-inline { + margin-top: 0; + margin-bottom: 30px; +} + +.portfolio-modal .modal-content img { + margin-bottom: 30px; +} + +.portfolio-modal .close-modal { + position: absolute; + top: 25px; + right: 25px; + width: 75px; + height: 75px; + background-color: transparent; + cursor: pointer; +} + +.portfolio-modal .close-modal:hover { + opacity: 0.3; +} + +.portfolio-modal .close-modal .lr { + z-index: 1051; + width: 1px; + height: 75px; + margin-left: 35px; + background-color: #222; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.portfolio-modal .close-modal .lr .rl { + z-index: 1052; + width: 1px; + height: 75px; + background-color: #222; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +::-moz-selection { + text-shadow: none; + background: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +::selection { + text-shadow: none; + background: HelveticaNeue, Helvetica, Arial, sans-serif; +} + +img::selection { + background: 0 0; +} + +img::-moz-selection { + background: 0 0; +} + +body { + webkit-tap-highlight-color: HelveticaNeue, Helvetica, Arial, sans-serif; +} diff --git a/client/js/app/src/app/styles/vespa.css b/client/js/app/src/app/styles/vespa.css new file mode 100644 index 00000000000..4017f0275c3 --- /dev/null +++ b/client/js/app/src/app/styles/vespa.css @@ -0,0 +1,752 @@ +/** +* Copyright Yahoo. Licensed under the terms of the Apache 2.0 license. See LICENSE in the project root. +* Based on vespa.css from https://github.com/vespa-engine/frontpage for header- and footer-elements +*/ +:root { + --primary: #188fff; + --secondary: #003abc; + --secondary-dark: #333; + --muted: #777; + + --fontprimary: 'Hind Madurai', Helvetica, Arial, sans-serif; + --fontsecondary: 'Hind Madurai', Helvetica, Arial, sans-serif; +} + +.bg-light-blue { + background-image: linear-gradient( + -1deg, + rgba(63, 157, 216, 0.08) 0%, + rgba(163, 195, 215, 0.08) 97% + ); +} + +.yql { +} + +.yql:focus { + outline: none; +} + +.information { + margin-left: -40px; + margin-right: 28px; + margin-top: -2.5px; + opacity: 0.6; + transition: transform 0.1s; /* Animation */ +} + +.information:hover { + transform: scale(1.05); +} + +/*** Tooltips! ***/ +.tip { + visibility: visible; + border-bottom: 1px dotted; + position: relative; + cursor: help; + text-decoration: none; + color: #fff !important; +} +.tip span { + display: none; + z-index: 100; + position: absolute; + padding: 0.6em; + padding-left: 1em; + top: 1.5em; + left: 2.4em; + width: 15em; + background-color: #4da2d6; + border: 1px solid #ffffff; + border-radius: 0.5em; +} + +.tip span td { + text-align: left; + vertical-align: top; + padding-left: 5px; +} + +.tip span a { + text-decoration: none; + color: white; +} + +.tip:hover span { + display: inline-block; +} +.sg-question-set, +.sg-type-radio ul.sg-list-vertical li, +.sg-type-checkbox ul.sg-list-vertical li, +.sg-question-options, +.sg-type-radio-likert .sg-question-options, +.sg-type-table .sg-question-options, +.sg-instructions { + overflow: visible; +} + +section h2.section-heading, +section h2.section-subheading, +section h3.section-heading, +section h3.section-subheading { + text-transform: none; + font-family: 'Hind Madurai', Helvetica, Arial, sans-serif; + font-weight: normal; + font-style: normal; +} + +section h2.section-heading, +section h3.section-heading { + font-size: 50px; + color: #3f9dd8; + margin-bottom: 5px; +} + +section h2.section-subheading, +section h3.section-subheading { + line-height: 26px; + margin-top: 0; +} + +header .help-title { + color: #ffc43c; + text-transform: uppercase; + font-weight: bold; +} + +.text-muted { + color: #303030; +} + +#banner { + background-color: #336699; + color: #ffffff; + font-weight: bold; + padding-bottom: 2px; + padding-top: 2px; + width: 100%; +} + +#banner a { + color: #ffffff; + text-decoration: underline; +} + +.navbar-default { + background-color: #005a8e; + padding: 0; + border-bottom: 2px solid rgba(255, 255, 255, 0.2); +} + +.navbar-default .navbar-header { + margin-left: 13px; +} + +.navbar-default .navbar-brand { + background: transparent url('https://vespa.ai/assets/vespa-logo.png') + no-repeat; + background-size: contain; + direction: ltr; + text-indent: -9000px; + height: 28px; + width: 100px; + display: inline-block; + font-family: 'Hind Madurai', Helvetica, Arial, sans-serif; + font-weight: bold; + color: var(--primary); + margin-top: 16px; + margin-left: 10px; +} + +.navbar-nav .nav-link { + font-weight: bold; + font-size: 14px; + letter-spacing: 1px; + color: #ffffff; + text-transform: none; + font-family: 'Hind Madurai', Helvetica, Arial, sans-serif; +} + +.navbar-default .navbar-nav > a:hover, +.navbar-default .navbar-nav > .active > a, +.navbar-default .navbar-nav > .active > a:hover { + color: #ffc43c; +} + +.navbar-default .navbar-toggler-icon { + background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%280, 0, 0, 0.55%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e'); +} + +.navbar-default .navbar-toggler { + margin-right: 45px; + border: 1px solid; + border-color: #1a242f; +} +.navbar-toggler:hover, +.navbar-default .navbar-toggler:focus { + background-color: #1a242f; + box-shadow: 0 0 0 0; +} + +.navbar-toggle { + margin-right: 45px; +} + +/* Trick to prevent anchored links to hide heading behind navbar */ +section[id]:before { + display: block; + content: ' '; + margin-top: -80px; + height: 100px; + visibility: hidden; +} + +header { + /*background-image: linear-gradient(0deg, #98C1DB 7%, #3F9DD8 100%); */ + background-color: #005a8e; + min-height: 1150px; +} + +@media (max-height: 1150px) { + header { + min-height: 100vh; + } +} + +header .intro { + margin-top: -80px; + max-width: 350px; + padding-top: 10px; + padding-bottom: 50px; +} + +header .intro-logo { + max-width: 120px; + padding-bottom: 30px; +} + +header .intro-button { + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5); + padding-left: 50px; + padding-right: 50px; +} + +header .intro-long { + line-height: 27px; + font-size: 16px; + padding-bottom: 20px; +} + +header .intro-param { + line-height: 27px; + font-size: 16px; + padding-bottom: 0px; + margin-bottom: 5px; +} +header .response { + line-height: 27px; + font-size: 20px; + padding-top: 10px; + padding-bottom: 8px; +} + +header .methodselector { + font-size: 15px; + color: #fff; + background-color: #99c1da; + width: 70px; + height: 25px; + border-width: 0px; + -o-transition: 0.3s; + -ms-transition: 0.3s; + -moz-transition: 0.3s; + -webkit-transition: 0.3s; + transition: 0.3s; +} +header .intro-help:hover { + background-color: #4ea2d6 !important; +} +header .methodselector:hover { + background-color: #79b4d8; +} +header .button:hover { + background-color: #79b4d8; +} +header .removeRow:hover { + background-color: #79b4d8; +} +header .addRow:hover { + background-color: #79b4d8; +} +header .showJSON:hover { + background-color: #79b4d8; +} +header .copyURL:hover { + background-color: #79b4d8; +} +header .copyJSON:hover { + background-color: #79b4d8; +} +header .methodselector:focus { + outline: none; +} +header .textbox:focus { + outline: none; +} +header .input:focus { + outline: none; +} +header .responsebox::selection { + background-color: grey; +} +header .textbox::selection { + background-color: grey; +} +header .input::selection { + background-color: grey; +} +header .propvalue::selection { + background-color: grey; +} +header .responsebox:focus { + outline: none; +} +header .responseinfo:focus { + outline: none; +} +header .propvalue:focus { + outline: none; +} +header .addpropsbutton:focus { + outline: none; +} + +header .input { + color: #000; + width: 190px; + border-width: 0px; + margin-right: 2px; +} + +header .input2 { + color: #000; + width: 175px; + border-width: 0px; + margin-right: 2px; +} + +header .textbox { + color: #000; + padding-left: 2px; +} + +header .responsebox { + color: #000; + background-color: #fff; +} + +header .responseinfo { + color: #d6e6f0; + text-align: center; + border-width: 0px; + background-color: transparent; +} + +header .propvalue { + color: #000; + background-color: #fff; + width: 175px; + border-width: 0px; + margin-bottom: 3px; +} + +header .propvalue::-webkit-input-placeholder { + /* Safari, Chrome(, Opera?) */ + color: gray; + font-style: italic; +} +header .propvalue:-moz-placeholder { + /* Firefox 18- */ + color: gray; + font-style: italic; +} +header .propvalue:-moz-placeholder { + /* Firefox 19+ */ + color: gray; + font-style: italic; +} +header .propvalue-ms-input-placeholder { + /* IE (10+?) */ + color: gray; + font-style: italic; +} + +header .button { + font-size: 15px; + color: #fff; + background-color: #99c1da; + width: 70px; + height: 25px; + border-width: 0px; + border-radius: 5px; + padding: 0px; +} +header .button:focus { + outline: none; +} + +header .addpropsbutton { + font-size: 15px; + color: #fff; + background-color: #99c1da; + width: 175px; + height: 23px; + border-width: 0px; + border-radius: 5px; + padding: 0px; + margin-left: 2px; + margin-bottom: 3px; +} +header .addRow { + font-size: 15px; + color: #fff; + background-color: #99c1da; + width: 70px; + height: 25px; + border-width: 0px; + border-radius: 5px; + padding: 0px; +} +header .addRow:focus { + outline: none; +} + +header .removeRow { + font-size: 16px; + color: #fff; + background-color: #99c1da; + width: 35px; + height: 23px; + border-width: 0px; + border-radius: 5px; + padding: 0px; + padding-bottom: 2px; + margin-left: 3px; + text-align: center; + line-height: normal; +} +header .removeRow:focus { + outline: none; +} + +header .json:focus { + outline: none; +} +header .copyJSON:focus { + outline: none; +} +header .showJSON:focus { + outline: none; +} +header .copyURL:focus { + outline: none; +} +header .pasteJSON:focus { + outline: none; +} + +header .copyJSON { + font-size: 15px; + color: #fff; + background-color: #99c1da; + width: 130px; + height: 25px; + border-width: 0px; + border-radius: 5px; + padding-left: 1px; + margin-top: 10px; + margin-bottom: 20px; + margin-right: 2px; + display: none; +} + +header .showJSON { + font-size: 15px; + color: #fff; + background-color: #99c1da; + width: 140px; + height: 25px; + border-width: 0px; + border-radius: 5px; + padding: 0px; + margin-top: 5px; + margin-bottom: 10px; +} + +header .pasteJSON { + font-size: 15px; + color: #fff; + background-color: #99c1da; + width: 140px; + height: 25px; + border-width: 0px; + border-radius: 5px; + padding-left: 0px; + padding-bottom: 2px; + margin-top: 35px; + margin-bottom: 10px; +} + +header .copyURL { + font-size: 15px; + color: #fff; + background-color: #99c1da; + width: 130px; + height: 25px; + border-width: 0px; + border-radius: 5px; + padding-left: 1px; + margin-top: 25px; + margin-bottom: 10px; + margin-left: 2px; + display: none; +} + +header .intro .intro-lead-in { + font-style: normal; + font-size: 22px; + line-height: 50px; + margin-bottom: 25px; + font-family: 'Hind Madurai', Helvetica, Arial, sans-serif; +} + +header .intro .intro-heading { + font-style: normal; +} + +header .intro-button { + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5); +} + +header .intro .btn-xl { + background: #ffffff; + border: 1px solid #3f9dd8; + border-radius: 2px; + font-size: 20px; + color: #3f9dd8; + font-weight: normal; + text-transform: none; + font-family: 'Hind Madurai', Helvetica, Arial, sans-serif; +} + +header span { + display: inline-block; + position: inherit; + margin-top: 10px; + /*padding-left: 50px;*/ + transform: translateX(-50%); + background: transparent; + border: none !important; + font-size: 0; +} + +header .intro-copy { + background: transparent; + border: none !important; + font-size: 0; +} + +header .intro-help { + display: inline-block; + margin-top: 15px; + width: 134px; + height: 45px; + background-color: transparent; + border: none !important; + font-size: 0; + + border-top-left-radius: 30%; + border-top-right-radius: 29%; + border-bottom-right-radius: 24%; + border-bottom-left-radius: 26%; +} + +header .intro-refresh { + display: inline-block; + margin-top: 15px; + /* transform: translateX(-50%); */ + background: transparent; + border: none !important; + font-size: 0; +} + +@media (min-height: 1150px) { + header .intro-down-arrow { + /* Hard code top: 1150 (height of top section) - 20 (bottom) - 36 (image height) = 1094 */ + top: 1094px; + } +} + +@media (max-height: 825px) { + header .intro-down-arrow { + display: none; + } +} + +@media (min-width: 768px) { + header .intro { + padding-top: 200px; + padding-bottom: 200px; + max-width: 620px; + } + + header .intro-logo { + max-width: 238px; + padding-bottom: 70px; + } + + header .intro .intro-lead-in { + font-size: 51px; + font-style: normal; + line-height: 50px; + } + + header .intro .intro-long { + margin-left: 80px; + margin-right: 80px; + } + + header .intro .intro-heading { + margin-bottom: 25px; + font-size: 90px; + font-weight: 600; + } +} + +section { + padding: 50px 0; +} + +section h3.section-subheading { + margin-bottom: 50px; + font-weight: normal; +} + +@media (min-width: 768px) { + section { + padding: 50px 0; + } +} + +footer .row { + font-size: 12px; + text-align: left; +} + +footer .row h4 { + font-size: 14px; + padding-left: 40px; +} + +footer .row .quicklinks { + line-height: 25px; + list-style: none; + text-align: left; +} + +footer .credits { + font-size: 10px; + text-align: center; +} + +#description p { + font-weight: 300; + font-size: 25px; +} + +footer { + font-size: 14px; + color: #ffffff; + background-color: #3f9dd8; + line-height: 22px; + letter-spacing: 0; + text-align: left; + display: flex; + flex-wrap: wrap; +} + +footer .footer-row { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + flex-wrap: wrap; +} + +footer quicklinks { + font-size: 14px; + color: #ffffff; +} + +footer ul.quicklinks { + margin: 0; + padding: 0; +} + +footer .footer-title { + color: #ffc43c; + text-transform: uppercase; + font-weight: bold; +} + +footer ul.quicklinks a { + font-size: 14px; + color: #ffffff; +} + +footer .quicklink-section { + padding: 0; + min-width: 120px; +} + +footer .credits { + float: left; + font-size: 12px; + font-weight: normal; + text-align: right; + font-family: 'Hind Madurai', Helvetica, Arial, sans-serif; +} + +footer .credits a { + color: #ffffff; +} + +footer .credits span { + color: #ffc43c; +} + +footer a { + text-decoration: none; +} + +footer .table { + width: fit-content; + margin-right: auto; + margin-left: auto; + float: left; + margin-bottom: 0em; +} + +footer .table tbody th { + font-size: 13px; + padding-right: 2em; +} + +footer table thead { + color: #ffc43c; +} + +footer table tbody a { + color: #ffffff; +} |