fedora-hubs

Clone

#519 restyle the items around the header to match the mockups better
Closed 6 years ago by abompard. Opened 6 years ago by ryanlerch.
ryanlerch/fedora-hubs description-css  into  develop

hubs/static/client/app/components/HubCommunity.css hubs/static/client/app/components/HubHeader/HubCommunity.css
file renamed
file was moved with no change to the file
hubs/static/client/app/components/HubCommunity.js hubs/static/client/app/components/HubHeader/HubCommunity.js
file renamed
+4 -2 
@@ -1,6 +1,6 @@ 
 

  import React from 'react';
 

  import PropTypes from 'prop-types';
 

- import Modal from '../Modal';
 

+ import Modal from './Modal';
 

  import "./HubCommunity.css";
 

  

  
@@ -8,11 +8,13 @@ 
 

  

    render() {
 

      return (
 

-       <div className="HubCommunity p-2 mt-2 rounded">
 

+       <div className="card HubCommunity mb-2">
 

+         <div className="card-block p-2">

Those two lines are common with UserContact and could be abstracted out in HubDetails

 
          <HubCommunityRules hub={this.props.hub} />
 

          <HubCommunityOwners hub={this.props.hub} />
 

          <HubCommunityMeetings hub={this.props.hub} />
 

          <HubCommunityCommunication hub={this.props.hub} />
 

+         </div>
 

        </div>
 

      );
 

    }

hubs/static/client/app/components/HubDetails.css hubs/static/client/app/components/HubHeader/HubDetails.css
file renamed
file was moved with no change to the file
hubs/static/client/app/components/HubDetails.js hubs/static/client/app/components/HubHeader/HubDetails.js
file renamed
+1 -1 
@@ -9,7 +9,7 @@ 
 

  

    render() {
 

      return (
 

-       <div className="HubDetails p-2 mt-2 rounded">
 

+       <div>
 

          { this.props.hub.type === "user" &&
 

            <UserContact hub={this.props.hub} />
 

          }

file modified
-6 
@@ -23,9 +23,3 @@ 
 

      left: 1rem;
 

  }
 

  

- .HubHeader.hub-user .description {
 

-     background-color: white;
 

- }
 

- .HubHeader.hub-team .description {
 

-     background-color: #dfedf3;
 

- }

file modified
-5 
@@ -27,11 +27,6 @@ 
 

            </h5>
 

            <div className="clearfix"></div>
 

          </div>
 

-         { this.props.hub.config.description &&
 

-           <div className="description p-2 mt-2 rounded">
 

-             {this.props.hub.config.description}
 

-           </div>
 

-         }
 

        </div>
 

      );
 

    }

file modified
-2 
@@ -3,7 +3,6 @@ 
 

  import HubConfig from '../HubConfig';
 

  import EditModeButton from './EditModeButton';
 

  import HubMembership from './HubMembership';
 

- import HubDetails from './HubDetails';
 

  

  

  export default class HubHeaderRight extends React.Component {
 
@@ -18,7 +17,6 @@ 
 

              <EditModeButton />
 

            </div>
 

          }
 

-         <HubDetails hub={this.props.hub} />
 

        </div>
 

      );
 

    }

hubs/static/client/app/components/UserContact.js hubs/static/client/app/components/HubHeader/UserContact.js
file renamed
+38 -36 
@@ -3,49 +3,51 @@ 
 

  import {
 

    FormattedDate
 

  } from "react-intl";
 

- import CurrentTime from "../CurrentTime";
 

+ import CurrentTime from "./CurrentTime";
 

  

  

  export default class UserContact extends React.Component {
 

  

    render() {
 

      return (
 

-       <div className="UserContact">
 

-         <ul className="fa-ul">
 

-           <li>
 

-             <i className="fa fa-li fa-map-marker" aria-hidden="true"></i>
 

-             <span className="ml-2">
 

-                 {this.props.hub.config.country}
 

+       <div className="card UserContact mb-2">
 

+         <div className="card-block p-2">
 

+           <ul className="fa-ul">
 

+             <li>
 

+               <i className="fa fa-li fa-map-marker" aria-hidden="true"></i>
 

+               <span className="ml-2">
 

+                   {this.props.hub.config.country}
 

+               </span>
 

+             </li>
 

+             <li>
 

+               <i className="fa fa-li fa-clock-o" aria-hidden="true"></i>
 

+               <span className="ml-2 mr-1">Current Time:</span>
 

+               <CurrentTime offset={this.props.hub.config.timezone_offset} />
 

+             </li>
 

+             <li>
 

+               <i className="fa fa-li fa-envelope-o" aria-hidden="true"></i>
 

+               <span className="ml-2">
 

+                 {this.props.hub.config.email}
 

+               </span>
 

+             </li>
 

+             <li>
 

+               <i className="fa fa-li fa-comment-o" aria-hidden="true"></i>
 

+               <span className="ml-2">
 

+                 {this.props.hub.config.chat_nickname}
 

+               </span>
 

+             </li>
 

+           </ul>
 

+           <div className="text-center">
 

+             <i className="fa fa-certificate" aria-hidden="true"></i>
 

+             <span className="ml-2 mr-1">
 

+               Member Since
 

              </span>
 

-           </li>
 

-           <li>
 

-             <i className="fa fa-li fa-clock-o" aria-hidden="true"></i>
 

-             <span className="ml-2 mr-1">Current Time:</span>
 

-             <CurrentTime offset={this.props.hub.config.timezone_offset} />
 

-           </li>
 

-           <li>
 

-             <i className="fa fa-li fa-envelope-o" aria-hidden="true"></i>
 

-             <span className="ml-2">
 

-               {this.props.hub.config.email}
 

-             </span>
 

-           </li>
 

-           <li>
 

-             <i className="fa fa-li fa-comment-o" aria-hidden="true"></i>
 

-             <span className="ml-2">
 

-               {this.props.hub.config.chat_nickname}
 

-             </span>
 

-           </li>
 

-         </ul>
 

-         <div className="text-center">
 

-           <i className="fa fa-certificate" aria-hidden="true"></i>
 

-           <span className="ml-2 mr-1">
 

-             Member Since
 

-           </span>
 

-           <FormattedDate
 

-             value={Date.parse(this.props.hub.config.creation_date)}
 

-             month="short"
 

-             year="numeric"
 

-             />
 

+             <FormattedDate
 

+               value={Date.parse(this.props.hub.config.creation_date)}
 

+               month="short"
 

+               year="numeric"
 

+               />
 

+           </div>
 

          </div>
 

        </div>
 

      );

file modified
+35 
@@ -3,3 +3,38 @@ 
 

      left: 1rem;
 

      z-index: 1;
 

  }
 

+ 

+ .WidgetsArea.hub-user .hub-description{
 

+     background:white;
 

+     color: black;
 

+     border: none;
 

+ }
 

+ 

+ .WidgetsArea.hub-user .hub-description:after{
 

+     content: ''; 

+     position: absolute; 

+     top: 0; 

+     left: 35px; 

+     width: 0; 

+     height: 0; 

+     border: 12px solid transparent; 

+     border-bottom-color: white; 

+     border-top: 0; 

+     margin-left: -12px; 

+     margin-top: -12px;
 

+ }
 

+ 

+ .WidgetsArea .hub-description{
 

+     position: relative;
 

+ }
 

+ 

+ .WidgetsArea .hub-description .hackybackground{
 

+     background: #e7e7e7;
 

+     width: 5000px;
 

+     position: absolute;
 

+     bottom: -10px;
 

+     height: 100%;
 

+     left: -1000px;
 

+     z-index: -3000;   

+     padding-top: 1500px;
 

+ }

file modified
+16 -1 
@@ -7,6 +7,10 @@ 
 

  import SSESource from "./SSESource";
 

  import NotifIcon from "./NotifIcon";
 

  import Spinner from "./Spinner";
 

+ import HubCommunity from "./HubCommunity";
 

+ import HubDetails from './HubDetails';
 

+ 

+ 

  import { fetchWidgets } from '../core/actions/widgets';
 

  import "./WidgetsArea.css";
 

  
@@ -21,9 +25,10 @@ 
 

      if (!this.props.hub.name) {
 

        return null;
 

      }
 

+     let hubTypeCss = `hub-${this.props.hub.type}`;
 

      const right_width = this.props.hub.config ? 12 - this.props.hub.config.left_width : 4;
 

      return (
 

-       <div className="WidgetsArea">
 

+       <div className={`WidgetsArea ${hubTypeCss}`}>
 

          { this.props.widgets.isLoading &&
 

            <Spinner />
 

          }
 
@@ -38,6 +43,13 @@ 
 

                <CobWeb hub={this.props.hub} />
 

              }
 

  

+             { (this.props.hub.config.description && !this.props.editMode) &&
 

+               <div className="alert alert-info hub-description">
 

+                 {this.props.hub.config.description}
 

+                 <div className="hackybackground"></div>
 

+               </div>
 

+             }
 

+ 

              <WidgetsColumn
 

                position="left"
 

                widgets={
 
@@ -50,6 +62,9 @@ 
 

            </div>
 

  

            <div className={`col-md-${right_width}`}>
 

+             {!this.props.editMode &&
 

+               <HubDetails hub={this.props.hub} />
 

+             }
 

              <WidgetsColumn
 

                position="right"
 

                widgets={

file modified
+2 -2 
@@ -5,6 +5,7 @@ 
 

  #navbar-top {
 

    background-image: linear-gradient(to bottom,#eee 0%,#ddd 100%);
 

    background-repeat: repeat-x;
 

+   border-bottom: 1px solid #ccc;
 

  }
 

  

  #navbar-top img.chaticon,
 
@@ -44,10 +45,9 @@ 
 

  

  header {
 

    color: #373a3c;
 

-   background: #f3f3f3 none repeat scroll 0 0;
 

+   background: #e7e7e7 none repeat scroll 0 0;
 

    width: 100%;
 

    font-family: 'Open Sans', sans-serif;
 

-   border-bottom: 1px solid #ddd;
 

    padding-bottom: .5rem;
 

  }

file modified
+15 -13 
@@ -151,15 +151,16 @@ 
 

      hub = hubs.models.Hub(name='marketing', hub_type="team")
 

      db.add(hub)
 

      hub.config["summary"] = 'The Fedora Marketing Team'
 

-     hub.config["description"] = ''
 

-     'The Fedora Marketing Team develops and executes marketing strategies to'
 

-     ' promote the usage and support of Fedora worldwide. Through the'
 

-     ' development of processes and content, this project aims to support'
 

-     ' the efforts of other Fedora projects to spread Fedora and to provide a'
 

-     ' central repository of ideas and information that can be used to deliver'
 

-     ' Fedora to new audiences. We work closely with the Fedora Ambassadors who'
 

-     ' spread the word about Fedora at events and allow the Fedora Project to'
 

-     ' interact directly with its existing and prospective users.'
 

+     hub.config["description"] = (
 

+         'The Fedora Marketing Team develops and executes marketing strategies'
 

+         ' to promote the usage and support of Fedora worldwide. Through the'
 

+         ' development of processes and content, this project aims to support'
 

+         ' the efforts of other Fedora projects to spread Fedora and to'
 

+         ' provide a central repository of ideas and information that can be'
 

+         ' used to deliver Fedora to new audiences. We work closely with the'
 

+         ' Fedora Ambassadors who spread the word about Fedora at events'
 

+         ' and allow the Fedora Project to interact directly with its'
 

+         ' existing and prospective users.')
 

  

      hub.config["rules_url"] = 'https://fedoraproject.org/wiki/Marketing'
 

      hub.config["mailing_list"] = 'marketing@lists.fedoraproject.org'
 
@@ -183,10 +184,11 @@ 
 

      hub = hubs.models.Hub(name='designteam', hub_type="team")
 

      db.add(hub)
 

      hub.config["summary"] = 'The Fedora Design Team'
 

-     hub.config["description"] = ''
 

-     'The Design Team is the design group of the Fedora project. Our interests '
 

-     'are not only in creating graphics for use by the Fedora community, but '
 

-     'also advocating the use of the creative tools that are a part of Fedora.'
 

+     hub.config["description"] = (
 

+         'The Design Team is the design group of the Fedora project. Our'
 

+         ' interests are not only in creating graphics for use by the'
 

+         ' Fedora community, but also advocating the use of the'
 

+         ' creative tools that are a part of Fedora.')
 

  

      hub.config["rules_url"] = 'https://fedoraproject.org/wiki/Design'
 

      hub.config["meetings_text"] = 'Meetings are every 2nd Tuesday at 16:00 UTC'

Makes the HubCommunity box seem like it flows out of the hubheader when there is a hub description in the hub.

This took a little futzing to get looking right, since what we wanted to achieve is kinda hard, but ended up with it looking visually ok.

I tried to do the merge and here's what I've come up with :
https://paste.fedoraproject.org/paste/p1I5sMnep6nJH3TXBbzIzQ
You'll also have to move HubDetails.js and UserContact.js from components/HubHeader/ to components/

With this, it works fine here. Thanks for the CSS fix! :-)

rebased onto 5def0d7
6 years ago

Those two lines are common with UserContact and could be abstracted out in HubDetails

I've also made a slight change to HubDetails to avoid rendering an empty box on stream pages, please incorporate it when you'll rebase. Thanks! :-)

Merged manually (f17fe16).

Pull-Request has been closed by abompard
6 years ago
Metadata
None
No Tags
Changes Summary 12
+0 -0
file renamed
hubs/static/client/app/components/HubHeader/HubCommunity.css
hubs/static/client/app/components/HubCommunity.css
+4 -2
file renamed
hubs/static/client/app/components/HubHeader/HubCommunity.js
hubs/static/client/app/components/HubCommunity.js
+0 -0
file renamed
hubs/static/client/app/components/HubHeader/HubDetails.css
hubs/static/client/app/components/HubDetails.css
+1 -1
file renamed
hubs/static/client/app/components/HubHeader/HubDetails.js
hubs/static/client/app/components/HubDetails.js
+0 -6
file changed
hubs/static/client/app/components/HubHeader/HubHeader.css
+0 -5
file changed
hubs/static/client/app/components/HubHeader/HubHeaderLeft.js
+0 -2
file changed
hubs/static/client/app/components/HubHeader/HubHeaderRight.js
+38 -36
file renamed
hubs/static/client/app/components/HubHeader/UserContact.js
hubs/static/client/app/components/UserContact.js
+35 -0
file changed
hubs/static/client/app/components/WidgetsArea.css
+16 -1
file changed
hubs/static/client/app/components/WidgetsArea.js
+2 -2
file changed
hubs/static/css/style.css
+15 -13
file changed
populate.py
Powered by Pagure 5.13.3
Documentation • File an Issue • About • SSH Hostkey/Fingerprint
© Red Hat, Inc. and others.