Commit c5f22835 authored by Axel Bocciarelli's avatar Axel Bocciarelli
Browse files

Merge branch 'index' into 'master'

Clean up index.html and move external CSS imports to index.js

See merge request !413
parents 1e8b83c2 889f7b41
Pipeline #31795 passed with stages
in 7 minutes and 26 seconds
......@@ -7509,11 +7509,6 @@
"mime-types": "^2.1.12"
}
},
"formdata-polyfill": {
"version": "3.0.20",
"resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-3.0.20.tgz",
"integrity": "sha512-TAaxIEwTBdoH1TWndtUH1T0/GisUHwmOKcV5hjkR/iTatHBJSOHb563FP86Lra5nXo3iNdhK7HPwMl5Ihg71pg=="
},
"forwarded": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
......@@ -12699,11 +12694,11 @@
}
},
"react-combo-search": {
"version": "git://github.com/Max-Z80/react-combo-search.git#9f34d7a8022dfa58f40734f6dfbe51c4534923e1",
"from": "git://github.com/Max-Z80/react-combo-search.git",
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/react-combo-search/-/react-combo-search-1.1.4.tgz",
"integrity": "sha512-f4AENtgU4L2XAv9Q/UEIBUlkNqqFnts0MIboj2nkpCe9Eo8lVZT6Qltf7WFrWkRgcXonX7uJlZ95aUk9sAairA==",
"requires": {
"font-awesome": "*",
"formdata-polyfill": "^3.0.12",
"lodash.isequal": "^4.5.0",
"lodash.omit": "^4.5.0",
"moment": ">2.19.3",
......@@ -12716,7 +12711,6 @@
"version": "1.3.22",
"resolved": "https://registry.npmjs.org/react-combo-select/-/react-combo-select-1.3.22.tgz",
"integrity": "sha512-7pwfq9QV8i7Gh1GsM8HmhuiKsPX+FxMTxvVbA6cgz+8m1gEDIspRMjWJUoDBzbp4L+C2F5Zuyjh1W/WJNzFhFw==",
"optional": true,
"requires": {
"prop-types": "^15.6.0",
"react": "^16.4.0",
......@@ -12727,7 +12721,6 @@
"version": "2.16.3",
"resolved": "https://registry.npmjs.org/react-datetime/-/react-datetime-2.16.3.tgz",
"integrity": "sha512-amWfb5iGEiyqjLmqCLlPpu2oN415jK8wX1qoTq7qn6EYiU7qQgbNHglww014PT4O/3G5eo/3kbJu/M/IxxTyGw==",
"optional": true,
"requires": {
"create-react-class": "^15.5.2",
"object-assign": "^3.0.0",
......@@ -12738,8 +12731,7 @@
"object-assign": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
"integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=",
"optional": true
"integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I="
}
}
},
......@@ -13171,8 +13163,7 @@
"react-onclickoutside": {
"version": "6.9.0",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz",
"integrity": "sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A==",
"optional": true
"integrity": "sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A=="
},
"react-overlays": {
"version": "0.8.3",
......
......@@ -6,22 +6,14 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<meta name="theme-color" content="#000000" />
<!-- Latest compiled and minified CSS -->
<link
......@@ -31,16 +23,7 @@
crossorigin="anonymous"
/>
<!-- <link rel="stylesheet" href="https://bootswatch.com/3/readable/bootstrap.min.css"> -->
<!-- Optional theme
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
-->
<!-- icons for the editor-->
<!--<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">-->
<title>ESRF Portal</title>
<title>ESRF Data Portal</title>
</head>
<body>
......@@ -48,61 +31,5 @@
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
<script>
function makeFullScreen(img) {
if (img.style.height && img.style.width) {
// This test prevents bad image resizing out of fullscreen mode in case the user clicks several times on the image when it is in fullscreen mode.
let originalHeightByStyle = img.style.height;
let originalWidthByStyle = img.style.width;
img.setAttribute('style', '');
img.setAttribute('originalHeightByStyle', originalHeightByStyle);
img.setAttribute('originalWidthByStyle', originalWidthByStyle);
}
img.onfullscreenchange = function handleFullscreenChange(event) {
let img = event.target;
let isFullscreen = document.fullscreenElement === img;
if (!isFullscreen) {
// img goes out of fullscreen mode
img.style.height = img.getAttribute('originalHeightByStyle');
img.style.width = img.getAttribute('originalWidthByStyle');
img.style.cursor = 'zoom-in';
}
};
img.onwebkitfullscreenchange = img.onfullscreenchange;
img.onmozfullscreenchange = img.onfullscreenchange;
img.onMSFullscreenChange = img.onfullscreenchange;
try {
if (img.requestFullscreen) {
img.requestFullscreen();
} else if (img.msRequestFullscreen) {
img.msRequestFullscreen();
} else if (img.mozRequestFullScreen) {
img.mozRequestFullScreen();
} else if (img.webkitRequestFullscreen) {
img.webkitRequestFullscreen();
} else {
console.log('Fullscreen API is not supported');
}
} catch (e) {
console.log('make full screen not supported');
}
}
</script>
</html>
......@@ -30,6 +30,10 @@ import LogbookPager from '../LogbookPager';
import TagListInLine from '../Tag/TagListInLine';
import EventIcon from './EventIcon';
import './eventList.css';
import { makeFullScreen } from '../../../helpers';
// Expose on window to use as `onClick` handler on images
window.makeFullScreen = makeFullScreen;
/**
* The list of the all events
......
......@@ -20,9 +20,6 @@ import LogbookPager from '../LogbookPager';
import EventListMenuButton from './EventListMenuButton';
import NewlyAvailableEventsDialogue from './NewlyAvailableEventsDialogue';
import './eventListMenu.css';
import './react-combo-search.css';
import './react-combo-select.css';
import './react-datetime.css';
/**
* The menu displayed above the event list
......@@ -68,6 +65,7 @@ class EventListMenu extends React.Component {
top: 0,
backgroundColor: 'white',
zIndex: 1,
marginTop: 10,
}}
>
<Navbar.Header>
......@@ -212,7 +210,7 @@ class EventListMenu extends React.Component {
</Nav>
<Nav pullRight>
<NavItem eventKey={6} href="#" className="logbookNavItem">
<NavItem eventKey={6} className="logbookNavItem">
<div className="comboSearchContainer">
<ComboSearch
onSearch={this.onSearch}
......@@ -239,7 +237,7 @@ class EventListMenu extends React.Component {
color: '#666',
}}
>
<b> &nbsp; {eventCountBySelectionFilter} found </b>
<b>{eventCountBySelectionFilter} found</b>
</Well>
</NavItem>
</Nav>
......
......@@ -5,6 +5,8 @@
}
.logbookNavItem > a {
pointer-events: none; /* workaround so nav link doesn't affect combo search (1/2) */
cursor: default;
padding-top: 8px !important;
padding-bottom: 5px !important;
padding-left: 5px !important;
......@@ -15,3 +17,193 @@
.logbookNavItem.dropdown > a > span {
display: none;
}
/* === `react-combo-search` overrides === */
.ComboSearch {
pointer-events: all; /* workaround so nav link doesn't affect combo search (2/2) */
display: flex;
flex-wrap: wrap;
border: none;
padding: 0;
font-size: 12px;
}
.ComboSearch * {
font-size: inherit;
}
.ComboSearch > p {
display: none;
}
.ComboStyleOverride {
flex: 0 0 auto;
width: 150px;
margin-right: 0;
padding-right: 8px;
}
.ComboStyleOverride .combo-select {
min-width: 0;
}
.ComboStyleOverride .combo-select-head {
width: 100%;
height: auto;
min-width: 0;
padding-left: 1rem;
border-radius: 3px;
line-height: 28px;
font-size: inherit;
color: inherit;
}
.combo-select .combo-select-head svg {
right: 8px;
pointer-events: none;
}
.combo-select .combo-select-body .combo-select-item {
padding-left: 1rem;
line-height: 32px;
height: auto;
}
.ComboSearch__inputWrapper {
flex: 1 1 0%;
}
.ComboSearch__inputIcon {
left: auto;
right: 5px;
top: 3px;
width: 25px;
height: 25px;
background-size: contain;
}
.Input {
outline: none;
height: auto;
padding: 0 3rem 0 1rem;
border-radius: 3px 0 0 3px;
line-height: 28px;
}
.ComboSearch input[type='search']:focus,
.ComboSearch input[type='text']:focus {
outline: none;
border-color: #45b3e3;
}
.ComboSearch__RadioWrapper {
flex: none;
height: auto;
padding-right: 8px;
}
.ComboSearch__datePicker {
flex: 1 1 0%;
width: auto;
margin-left: 0;
}
.ComboSearch__datePickerWrapper {
flex: 1 1 0%;
height: auto;
}
.RadioGroup {
width: auto;
}
.RadioGroup__label {
position: relative;
height: auto;
padding: 0 5px;
line-height: 28px;
border-radius: 8px;
color: inherit;
text-transform: lowercase;
pointer-events: none;
}
.RadioGroup__label--checked {
background-color: transparent;
}
.RadioGroup__label > input {
pointer-events: all;
display: inline;
margin-right: 3px;
opacity: 0;
cursor: pointer;
}
.RadioGroup__fakeRadio {
position: absolute;
left: 5px;
top: 8px;
width: 13px;
height: 13px;
border: 1px solid #666;
border-radius: 50%;
}
.RadioGroup__fakeRadio--checked > .RadioGroup__fakeRadioInner {
display: block;
width: 9px;
height: 9px;
margin-top: 1px;
margin-left: 1px;
border-radius: 50%;
background-color: #666;
}
.Datepicker__icon {
right: 5px;
top: 5px;
}
.rdtPicker {
right: 0;
}
.FilterBar {
flex: 1 0 100%;
margin: 0 -5px;
padding: 7px 0 0;
font-size: 12px;
}
.FilterBar__filter {
min-height: 0;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px 5px 0;
padding: 2px 28px 3px 6px;
border-radius: 3px;
}
.FilterBar__filterClose {
right: 5px;
}
.FilterBar__filterText {
width: auto;
margin: 0;
}
.FilterBar__filterClose + .FilterBar__filterText {
white-space: nowrap;
}
.FilterBar__filterClose + .FilterBar__filterText:after {
content: ':';
padding-right: 3px;
}
.FilterBar__filterText:last-child {
font-weight: 600;
}
/* --- reset --- */
.ComboSearch * {
box-sizing: border-box;
font-size: 14px;
}
.ComboSearch *:focus,
.ComboSearch a:focus,
.ComboSearch input:focus,
.ComboSearch button:focus,
.ComboSearch select:focus {
outline: none;
}
.ComboSearch input[disabled] {
background-color: #f9f9f9 !important;
border-color: #e1e1e1;
}
.ComboSearch input[disabled]:hover {
cursor: not-allowed;
}
.ComboSearch input[disabled]::-webkit-input-placeholder {
color: #e1e1e1;
}
.ComboSearch input[disabled]:-moz-placeholder {
/* Firefox 18- */
color: #e1e1e1;
}
.ComboSearch input[disabled]::-moz-placeholder {
/* Firefox 19+ */
color: #e1e1e1;
}
.ComboSearch input[disabled]:-ms-input-placeholder {
color: #e1e1e1;
}
.ComboSearch input[type='email']:focus,
.ComboSearch input[type='password']:focus {
outline-width: 2px;
}
.ComboSearch input[type='search']:focus,
.ComboSearch input[type='text']:focus {
outline: 1px solid #45b3e3;
}
.ComboSearch label {
font-weight: normal;
/*color: #595959;*/
}
.ComboSearch ::-webkit-input-placeholder {
/* Chrome */
color: #bcbcbc;
font-family: font-light, sans-serif;
}
.ComboSearch :-ms-input-placeholder {
/* IE 10+ */
color: #bcbcbc;
font-family: font-light, sans-serif;
}
.ComboSearch ::-moz-placeholder {
/* Firefox 19+ */
color: #bcbcbc;
font-family: font-light, sans-serif;
opacity: 1;
}
.ComboSearch :-moz-placeholder {
/* Firefox 4 - 18 */
color: #bcbcbc;
font-family: font-light, sans-serif;
opacity: 1;
}
.ComboSearch input[type='text']:-webkit-autofill,
.ComboSearch input[type='text']:-webkit-autofill:hover,
.ComboSearch input[type='text']:-webkit-autofill:focus,
.ComboSearch input[type='text']:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 42px white inset !important;
}
/* --- select override styles --- */
.ComboStyleOverride .combo-select {
/* max-width: 180px; */
}
.ComboStyleOverride .combo-select .combo-select-body {
border-radius: 2px;
font-size: 14px;
border-color: #bcbcbc;
}
.ComboStyleOverride .combo-select .combo-select-body .combo-select-item {
white-space: nowrap;
}
.ComboStyleOverride
.combo-select
.combo-select-body
.combo-select-item.selected
i {
color: #595959;
}
.ComboStyleOverride .combo-select i {
color: #595959;
}
.ComboStyleOverride .combo-select .search-input {
border-radius: 2px;
border: 1px solid #bcbcbc !important;
}
.ComboStyleOverride .combo-select-head {
border: 1px solid #bcbcbc;
border-radius: 2px;
font-size: 14px;
/*line-height: 2.6;*/
/*line-height: 42px;*/
line-height: 30px;
padding-left: 19px;
color: #595959;
/*height: 42px;*/
height: 30px;
width: auto;
min-width: 180px;
cursor: pointer;
vertical-align: top;
}
@media (max-width: 640px) {
.ComboStyleOverride .combo-select-head {
width: 100%;
}
}
/* --- datepicker style override --- */
.Datepicker {
position: relative;
}
.Datepicker__icon {
background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2218%22%20height%3D%2217%22%20viewBox%3D%220%200%2018%2017%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20id%3D%22a%22%20d%3D%22M18%208.5V0H0v17h18z%22/%3E%0A%20%20%20%20%3C/defs%3E%0A%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22b%22%20fill%3D%22%23fff%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23a%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23646464%22%20d%3D%22M16.875%2015.583a.365.365%200%200%201-.375.354h-15c-.207%200-.375-.159-.375-.354V3.01c0-.195.168-.354.375-.354h2.438V3.72c0%20.293.251.53.562.53.31%200%20.563-.237.563-.53V2.656h3.375V3.72c0%20.293.252.53.562.53.31%200%20.563-.237.563-.53V2.656h3.374V3.72c0%20.293.252.53.563.53.311%200%20.563-.237.563-.53V2.656H16.5c.207%200%20.375.159.375.354v12.573zM16.5%201.593h-2.438V.532c0-.294-.25-.531-.562-.531-.311%200-.563.237-.563.531v1.063H9.563V.53C9.563.237%209.31%200%209%200c-.31%200-.563.237-.563.531v1.063H5.063V.53C5.063.237%204.81%200%204.5%200c-.31%200-.563.237-.563.531v1.063H1.5c-.828%200-1.5.633-1.5%201.416v12.573C0%2016.366.672%2017%201.5%2017h15c.829%200%201.5-.634%201.5-1.417V3.01c0-.783-.671-1.416-1.5-1.416z%22%20mask%3D%22url%28%23b%29%22/%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23646464%22%20d%3D%22M4%208h2V6H4zM4%2011h2V9H4zM4%2014h2v-2H4zM8%2014h2v-2H8zM8%2011h2V9H8zM8%208h2V6H8zM12%2014h2v-2h-2zM12%2011h2V9h-2zM12%208h2V6h-2z%22/%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E)
no-repeat center center;
background-size: 18px;
width: 18px;
height: 18px;
position: absolute;
right: 15px;
/* top: 11px; */
top: 6px;
color: #595959;
pointer-events: none;
}
.Datepicker.Datepicker--pushDown {
margin-top: 25px;
}
@media (max-width: 767px) {
.Datepicker.Datepicker--pushDown {
margin-top: 45px;
}
}
.DatepickerSeparator {
display: inline-block;
width: 6.57%;
font-weight: bold;
font-size: 15px;
color: #595959;
text-align: center;
}
.rdtPrev span,
.rdtNext span,
.rdtBtn {
color: #45b3e3;
}