Merge branch 'issue_191' into 'master'

It fixes icat/E-DataPortal#191

Closes #191

See merge request icat/E-DataPortal!176

src/components/Logbook/List/EventList.js

@@ -139,27 +139,27 @@ export class Event extends React.Component {
             }            
         }
         return events.map((event, index) => {
-            return <tr key={index} id='contentDocList' style={{backgroundColor : '#F0F0F6'}}>
-                <td style={{ width: '16px', border: '0' }}>
+            return <tr key={index}  style={{backgroundColor : '#F0F0F6'}}>
+                <td style={{ width: '16px', border : 0}}>
                     <EventIcon event={event} />
                 </td>
-                <td style={{ width: '16px', border: '0', borderRight: '0px solid #F0F0F6' }}>
+                <td className='borderTopSeparatorBetweenEvents' style={{ width: '16px' }}>
                     <OverlayTrigger placement="right" overlay={<Tooltip id="tooltip"> <p> Events created on {Moment(getOriginalEvent(event).creationDate).format("MMMM Do YYYY, h:mm:ss a")} </p> </Tooltip>}>
                         <span style={{ cursor: 'pointer', color: 'black', margin: '0px' }}>{Moment(getOriginalEvent(event).creationDate).format("HH:mm:ss")} </span>
                     </OverlayTrigger>
                 </td>
-                <td style={{ width: '16px', border : 0}}>
+                <td className='borderTopSeparatorBetweenEvents' style={{ width: '16px'}}>
                 </td>
-                <td className="eventActionBox" style={{ paddingBottom: 0,  border : 0, backgroundColor: 'white', boxShadow:getShadow(event)}}>
+                <td className='borderTopSeparatorBetweenEventsInline' style={{ paddingBottom: 0, backgroundColor: 'white', boxShadow:getShadow(event)}}>
                     <div   style={{marginLeft: '20px',  backgroundColor: 'white'}}>
                         <LazyContentEvent event={event} />
                         {event.events && this.state.collapsed ? <Label style={{ color: "blue", backgroundColor: "#F8F8F8", cursor: "pointer" }} onClick={this.handleClick}  >.... {event.events.length} command lines more</Label> : null}
                     </div>
                 </td>
-                <td style={{ width: '200px', border: 0 }}>
+                <td className='borderTopSeparatorBetweenEvents'  style={{ width: '200px'  }}>
                     <TagListInLine tags={getTags(event, this.props.availableTags)} />
                 </td>
-                <td style={{ width: '50px', border: 0 }}>
+                <td className='borderTopSeparatorBetweenEvents'  style={{ width: '50px' }}>
                     <Button bsStyle="default" bsSize="small" style={{ width: '100px', position: 'static', padding: '0px' }} onClick={() => this.props.onEventClicked(event)}>
                             {getButtonIcon(event)}
                     </Button>

src/components/Logbook/List/eventList.css

 
-.sidenav {
-  height: 60%;
-  width: 400px;
-  position: fixed;
-  z-index: 1;
-  top: 70;
-  bottom : 70;
-  right: 0;
-  overflow-y: auto;
-  padding-top: 5px;
-  margin-right: 25px;
-  margin-bottom: 25px;
 
+/* It is the border top outside the page: icon, date, tags and edit button **/
+.borderTopSeparatorBetweenEvents {
+  border: 0px;
+  border-top: 1px solid #C6C6C6 !important;
 }
 
-.sidenav a {
-  padding: 6px 8px 6px 16px;
-  text-decoration: none;
-  font-size: 10px;
-  color: #818181;
-  display: block;
-}
-
-.sidenav a:hover {
-  color: black;
-}
-
-.main {
-  margin-right: 400px; /* Same as the width of the sidenav */
-  padding: 0px 10px;
-}
-
-@media screen and (max-height: 450px) {
-  .sidenav {padding-top: 15px;}
-  .sidenav a {font-size: 18px;}
-}
-
-.vertical-timeline::before {
-  /* this is the vertical line */
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 18px;
-  height: 100%;
-  width: 4px;
-  background: #F2F2F2;
-}
-
-.vertical-timeline-element-content::before {
-    content: '';
-    position: absolute;
-    top: 16px;
-    right: 100%;
-    height: 0;
-    width: 0;
-    border: 7px solid transparent;
-    border-right: 7px solid #F2F2F2;
-}
-
-.vertical-timeline-element-content {
-    position: relative;
-    margin-left: 60px;
-    background: #F2F2F2;
-    border-radius: .25em;
-    padding: 1em;
-    -webkit-box-shadow: 0 3px 0 #ddd;
-    box-shadow: 0 3px 0 #ddd;
-    
-}
-
-.vertical-time-line-custom-general{
-    font-size   : 8px;    
-    line-height : 1;     
-    width       : 200px;    
-}
-
-.vertical-timeline-element-custom{
-    font-size   : 8px;    
-    height      : 45px;
-    width       : 250px;
-    
-}
-.eventActionBox{   
-}
-
-.eventActionBox:hover{
-    cursor: 'pointer';
-}
-
-
+/* It is the border top within the page **/
+.borderTopSeparatorBetweenEventsInline{
+  border: 0px;
+  border-top: 1px dotted #E8E8E8 !important;
+}
\ No newline at end of file