Commit f7ab2695 authored by Maxime Chaillet's avatar Maxime Chaillet

make new modal web responsive.

parent b8cc4eeb
......@@ -51,7 +51,7 @@ class App extends Component {
<Footer></Footer>
{/* <Footer></Footer> */}
</div>
</Router>
);
......
......@@ -83,11 +83,11 @@ class BasicEvent extends React.Component {
<div style={{ flexGrow: '1', marginLeft: '30px' }}>
{showContent()}
</div>
<div style={{ flexGrow: '1', flexShrink: '0', flexBasis: '100px' }}>
{/* <div style={{ flexGrow: '1', flexShrink: '0', flexBasis: '100px' }}>
<div style={{ textAlign: 'right' }}>
<TagContainer context={BASIC_EVENT_CONTEXT} investigationId={investigationId} event={event} />
</div>
</div>
</div> */}
</div >
);
};
......
......@@ -290,25 +290,15 @@ div.collapsedEventPanel-heading:hover {
/* END Logbook menu related */
@media (min-width: 200px) {
.newOrEditModalClass {
width: 95%;
height: 95%;
}
}
@media (min-width: 1000px) {
/* .newEventOverlayClass {
background-color: transparent;
top: unset;
bottom: 60px;
height: 429px;
width: 850px;
left: unset;
padding-right: 0px; */
/* overflow-y: hidden; */
/* }
.newEventModalClass {
max-width: unset;
margin: unset;
width: 100%;
height: 100%;
padding: unset;
} */
.newEventOverlayClass {
.newOrEditOverlayClass {
background-color: transparent;
top: unset;
bottom: 60px;
......@@ -317,56 +307,64 @@ div.collapsedEventPanel-heading:hover {
left: unset;
padding-right: 0px;
}
.newEventModalClass {
.newOrEditModalClass {
max-width: unset;
margin: unset;
width: 100%;
height: 100%;
padding: unset;
}
/* .editEventOverlayClass {
background-color: transparent;
top: unset;
bottom: 570px;
height: 500px;
width: 850px;
left: unset;
padding-right: 0px;
}
.editEventModalClass {
max-width: unset;
margin: unset;
width: 100%;
height: 100%;
padding: unset;
} */
}
/*Container, container body, iframe*/
/* TinyMCE editor */
.mce-tinymce, .mce-container-body, #code_ifr {
min-height: 100% !important;
}
/*Container body*/
.mce-container-body {
position: absolute!important;
bottom: 0;
left: 0;
right: 0;
}
/*Editing area*/
.mce-container-body .mce-edit-area {
position: absolute!important;
top: 33px;
bottom: 0px;
left: 0;
right: 0;
@media (min-width: 200px) {
/* widgets containing div */
.mce-tinymce .mce-top-part {
position: absolute!important;
top: 0;
height: 101px;
left: 0;
right: 0;
}
/* tinyMCE editing area */
.mce-container-body .mce-edit-area {
position: absolute!important;
top: 102px;
bottom: 0px;
left: 0;
right: 0;
}
}
/*Footer*/
.mce-tinymce .mce-top-part {
position: absolute!important;
top: 0;
height: 32px;
left: 0;
right: 0;
}
\ No newline at end of file
@media (min-width: 1000px) {
/* widgets containing div */
.mce-tinymce .mce-top-part {
position: absolute!important;
top: 0;
height: 32px;
left: 0;
right: 0;
}
/* tinyMCE editing area */
.mce-container-body .mce-edit-area {
position: absolute!important;
top: 33px;
bottom: 0px;
left: 0;
right: 0;
}
}
/* end TinyMCE editor */
\ No newline at end of file
......@@ -90,31 +90,8 @@ class EventContainer extends React.Component {
view={this.state.view}
/>
{/* <OverlayBox open={this.state.isNewEventVisible} classNames={{ overlay: 'newEventOverlayClass', modal: 'newEventModalClass' }}>
<NewOrEditEventPanel
context={NEW_EVENT_CONTEXT}
createEvent={this.createEvent}
investigationId={investigationId}
onNewEventUploaded={this.onNewEventUploaded}
setNewEventVisibility={this.setNewEventVisibility}
user={user}
/>
</OverlayBox>
<OverlayBox open={this.state.eventBeingEdited ? true : false} classNames={{ overlay: 'editEventOverlayClass', modal: 'editEventModalClass' }}>
<NewOrEditEventPanel
context={EDIT_EVENT_CONTEXT}
event={this.state.eventBeingEdited}
investigationId={investigationId}
onEventUpdated={this.onEventUpdated}
setEditEventVisibility={this.setEditEventVisibility}
//toggleMode={this.toggleMode}
user={user}
updateEvent={this.updateEvent} />
</OverlayBox> */}
<OverlayBox open={this.state.isNewEventVisible === true || this.state.eventBeingEdited} classNames={{ overlay: 'newEventOverlayClass', modal: 'newEventModalClass' }}>
<div style={{ height: this.getPanelHeightInPercent(NEW_EVENT_CONTEXT), paddingBottom: '5px' }}>
<OverlayBox open={this.state.isNewEventVisible === true || this.state.eventBeingEdited} classNames={{ overlay: 'newOrEditOverlayClass', modal: 'newOrEditModalClass' }}>
<div style={{ height: this.getPanelHeightInPercent(NEW_EVENT_CONTEXT), paddingBottom: this.state.eventBeingEdited ? '5px' : '0px' }}>
{this.state.isNewEventVisible === true ?
<NewOrEditEventPanel
context={NEW_EVENT_CONTEXT}
......@@ -127,7 +104,7 @@ class EventContainer extends React.Component {
: null}
</div>
<div style={{ height: this.getPanelHeightInPercent(EDIT_EVENT_CONTEXT), paddingBottom: '5px'}}>
<div style={{ height: this.getPanelHeightInPercent(EDIT_EVENT_CONTEXT), paddingBottom: this.state.isNewEventVisible === true ? '5px' : '0px' }}>
{this.state.eventBeingEdited ?
<NewOrEditEventPanel
context={EDIT_EVENT_CONTEXT}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment