Merge pull request #1906 from LLK/hotfix/conference-2018

[MASTER]:Hotfix/conference 2018
This commit is contained in:
chrisgarrity 2018-06-01 08:38:35 -04:00 committed by GitHub
commit b5a400e29d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
51 changed files with 1888 additions and 453 deletions

View file

@ -11,6 +11,68 @@ require('../footer.scss');
const ConferenceFooter = props => ( const ConferenceFooter = props => (
<FooterBox> <FooterBox>
<div className="collaborators">
<h4>Sponsors</h4>
<FlexRow as="ul">
<li className="odl">
<a href="https://odl.mit.edu/">
<img
alt="MIT Office of Digital Learning"
src="/images/conference/footer/2018/mit-odl.png"
/>
</a>
</li>
<li className="google">
<a href="http://www.google.com/">
<img
alt="Google"
src="/images/conference/footer/2018/google.png"
/>
</a>
</li>
<li className="epam">
<a href="https://www.epam.com/">
<img
alt="EPAM Systems"
src="/images/conference/footer/2018/epam.png"
/>
</a>
</li>
<li className="intel">
<a href="http://www.intel.com/content/www/us/en/homepage.html">
<img
alt="Intel"
src="/images/conference/footer/2018/intel.png"
/>
</a>
</li>
<li className="lego">
<a href="http://www.legofoundation.com/">
<img
alt="LEGO Foundation"
src="/images/conference/footer/2018/lego-foundation.png"
/>
</a>
</li>
<li className="siegel">
<a href="http://www.siegelendowment.org/">
<img
alt="Siegel Family Endowment"
src="/images/conference/footer/2018/siegel.png"
/>
</a>
</li>
<li className="scratchfoundation">
<a href="http://www.scratchfoundation.org/">
<img
alt="Scratch Foundation"
src="/images/conference/footer/2018/scratch-foundation.png"
/>
</a>
</li>
</FlexRow>
</div>
<FlexRow className="scratch-links"> <FlexRow className="scratch-links">
<div className="family"> <div className="family">
<h4><FormattedMessage id="footer.scratchFamily" /></h4> <h4><FormattedMessage id="footer.scratchFamily" /></h4>
@ -121,16 +183,28 @@ const ConferenceFooter = props => (
</li> </li>
<li> <li>
<a <a
href="http://medium.com/scratchfoundation-blog" href="https://medium.com/scratchteam-blog"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<img <img
alt="scratch foundation blog" alt="scratch team blog"
src="/images/conference/footer/medium.png" src="/images/conference/footer/medium.png"
/> />
</a> </a>
</li> </li>
<li>
<a
href="https://scratch-foundation.myshopify.com/"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="scratch store"
src="/images/conference/footer/shopify-white.svg"
/>
</a>
</li>
</FlexRow> </FlexRow>
</div> </div>
</div> </div>

View file

@ -17,19 +17,14 @@
width: 100%; width: 100%;
ul { ul {
justify-content: space-between; margin: 5px 0;
align-items: center; align-items: center;
justify-content: space-between;
img { img {
margin: 20px 0; margin: 20px 0;
max-width: 180px; max-width: 180px;
max-height: 25px; max-height: 30px;
}
}
.nostarch {
img {
max-height: 40px;
} }
} }
@ -38,6 +33,12 @@
max-height: 50px; max-height: 50px;
} }
} }
.siegel {
img {
max-height: 60px;
}
}
} }
.scratch-links { .scratch-links {

View file

@ -33,12 +33,28 @@ const Navigation = () => (
</li> </li>
<li className="li-right mod-2018"> <li className="li-right mod-2018">
<ul className="li-right-ul mod-2018"> <ul className="li-right-ul mod-2018">
<li className="link questions"> <li className="link expect">
<a <a
className="link-a" className="link-a"
href="#questions" href="/conference/2018/expect"
> >
Questions What to Expect
</a>
</li>
<li className="link plan">
<a
className="link-a"
href="/conference/2018/plan"
>
Plan Your Visit
</a>
</li>
<li className="link schedule">
<a
className="link-a"
href="/conference/2018/schedule"
>
Schedule
</a> </a>
</li> </li>
</ul> </ul>

View file

@ -88,7 +88,7 @@ module.exports.getDaySchedule = day => (dispatch => {
cleanedRow[columns[i]] = cur[i]; cleanedRow[columns[i]] = cur[i];
} }
} }
cleanedRow.uri = `/conference/2016/${cleanedRow.rowid}/details`; cleanedRow.uri = `/conference/2018/${cleanedRow.rowid}/details`;
const timeSlot = cleanedRow.Chunk + cleanedRow.Start; const timeSlot = cleanedRow.Chunk + cleanedRow.Start;
if (typeof prev.timeSlots[timeSlot] === 'undefined') { if (typeof prev.timeSlots[timeSlot] === 'undefined') {
prev.timeSlots[timeSlot] = [cleanedRow]; prev.timeSlots[timeSlot] = [cleanedRow];

View file

@ -27,20 +27,6 @@
"view": "communityblocks-interviews/communityblocks-interviews", "view": "communityblocks-interviews/communityblocks-interviews",
"title": "Community Blocks Beta Tester Interviews" "title": "Community Blocks Beta Tester Interviews"
}, },
{
"name": "conference-details-2016",
"pattern": "^/conference/2016/:id/details/?$",
"routeAlias": "/conference(?!/201[4-5])",
"view": "conference/2016/details/details",
"title": "Event Details"
},
{
"name": "conference-expectations-2016",
"pattern": "^/conference/2016/expect/?$",
"routeAlias": "/conference(?!/201[4-5])",
"view": "conference/2016/expect/expect",
"title": "What to Expect"
},
{ {
"name": "conference-index", "name": "conference-index",
"pattern": "^/conference/?(\\?.*)?$", "pattern": "^/conference/?(\\?.*)?$",
@ -58,25 +44,39 @@
"viewportWidth": "device-width" "viewportWidth": "device-width"
}, },
{ {
"name": "conference-index-2016", "name": "conference-details-2018",
"pattern": "^/conference/2016/?$", "pattern": "^/conference/2018/:id/details/?$",
"routeAlias": "/conference(?!/201[4-5])", "routeAlias": "/conference(?!/201[4-5])",
"view": "conference/2016/index/index", "view": "conference/2018/details/details",
"title": "Event Details"
},
{
"name": "conference-expectations-2018",
"pattern": "^/conference/2018/expect/?$",
"routeAlias": "/conference(?!/201[4-5])",
"view": "conference/2018/expect/expect",
"title": "What to Expect"
},
{
"name": "conference-index-2018",
"pattern": "^/conference/2018/?$",
"routeAlias": "/conference(?!/201[4-5])",
"view": "conference/2018/index/index",
"title": "Scratch Conference", "title": "Scratch Conference",
"viewportWidth": "device-width" "viewportWidth": "device-width"
}, },
{ {
"name": "conference-plan-2016", "name": "conference-plan-2018",
"pattern": "^/conference/2016/plan/?$", "pattern": "^/conference/2018/plan/?$",
"routeAlias": "/conference(?!/201[4-5])", "routeAlias": "/conference(?!/201[4-5])",
"view": "conference/2016/plan/plan", "view": "conference/2018/plan/plan",
"title": "Plan Your Visit" "title": "Plan Your Visit"
}, },
{ {
"name": "conference-schedule-2016", "name": "conference-schedule-2018",
"pattern": "^/conference/2016/schedule/?$", "pattern": "^/conference/2018/schedule/?$",
"routeAlias": "/conference(?!/201[4-5])", "routeAlias": "/conference(?!/201[4-5])",
"view": "conference/2016/schedule/schedule", "view": "conference/2018/schedule/schedule",
"title": "Conference Schedule" "title": "Conference Schedule"
}, },
{ {

View file

@ -0,0 +1,114 @@
const classNames = require('classnames');
const connect = require('react-redux').connect;
const PropTypes = require('prop-types');
const React = require('react');
const render = require('../../../../lib/render.jsx');
const detailsActions = require('../../../../redux/conference-details.js');
const Page = require('../../../../components/page/conference/2018/page.jsx');
require('./details.scss');
class ConferenceDetails extends React.Component {
componentDidMount () {
let pathname = window.location.pathname.toLowerCase();
if (pathname[pathname.length - 1] === '/') {
pathname = pathname.substring(0, pathname.length - 1);
}
const path = pathname.split('/');
const detailsId = path[path.length - 2];
this.props.dispatch(detailsActions.startGetDetails(detailsId));
}
render () {
let backUri = '/conference/2018/schedule';
if (!this.props.conferenceDetails.error && !this.props.conferenceDetails.fetching) {
backUri = `${backUri}#${this.props.conferenceDetails.Day}`;
}
const classes = classNames(
'inner',
'details',
{fetching: this.props.conferenceDetails.fetching}
);
return (
<div className={classes}>
<div className="back">
<a href={backUri}>
&larr; Back to Full Schedule
</a>
</div>
{this.props.conferenceDetails.error ? [
<h2 key="not-found">Agenda Item Not Found</h2>
] : [
<h2 key="details-title">{this.props.conferenceDetails.Title}</h2>,
<ul
className="logistics"
key="details-logistics"
>
{this.props.conferenceDetails.fetching ? [] : [
<li key="presenter">
<img
alt="presenter icon"
src="/svgs/conference/schedule/presenter-icon.svg"
/>
{this.props.conferenceDetails.Presenter}
</li>,
<li key="start">
<img
alt="time icon"
src="/svgs/conference/schedule/time-icon.svg"
/>
{this.props.conferenceDetails.Start} &ndash; {this.props.conferenceDetails.End}
</li>,
<li key="type">
<img
alt="event icon"
src="/svgs/conference/schedule/event-icon.svg"
/>
{this.props.conferenceDetails.Type}
</li>
]}
</ul>,
<div
className="description"
key="details-desc"
>
<p>
{this.props.conferenceDetails.Description}
</p>
</div>,
<div
className="back"
key="details-back"
>
{this.props.conferenceDetails.fetching ? [] : [
<a
href={backUri}
key="details-back-uri"
>
&larr; Back to Full Schedule
</a>
]}
</div>
]}
</div>
);
}
}
ConferenceDetails.propTypes = {
conferenceDetails: PropTypes.object, // eslint-disable-line react/forbid-prop-types
dispatch: PropTypes.func
};
const mapStateToProps = state => ({
conferenceDetails: state.conferenceDetails
});
const ConnectedDetails = connect(mapStateToProps)(ConferenceDetails);
render(
<Page><ConnectedDetails /></Page>,
document.getElementById('app'),
{conferenceDetails: detailsActions.detailsReducer}
);

View file

@ -0,0 +1,56 @@
@import "../../../../frameless";
#view {
@media only screen and (max-width: $tablet - 1) {
margin-top: 100px;
}
@media only screen and (max-width: $desktop - 1) {
text-align: left;
}
}
.details {
width: $cols8;
&.inner {
margin-top: 2rem;
&.fetching {
opacity: .6;
}
}
.back {
margin: 1rem 0;
}
ul {
&.logistics {
margin: .25rem 0 2.5rem;
padding-left: 0;
list-style-type: none;
}
li {
margin: .25rem 0;
img {
margin-right: .5rem;
width: 1rem;
height: 1rem;
}
}
}
.description {
margin: 2rem 0;
}
}
//8 columns
@media only screen and (max-width: $desktop - 1) {
.details {
width: 100%;
}
}

View file

@ -0,0 +1,330 @@
const React = require('react');
const render = require('../../../../lib/render.jsx');
const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
const Page = require('../../../../components/page/conference/2018/page.jsx');
const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
require('./expect.scss');
const ConferenceExpectations = () => (
<div className="expect">
<TitleBanner className="mod-conference">
<h1>
What to Expect
</h1>
<div className="title-icon">
<img
alt="expect-image"
src="/images/conference/expect/what-to-expect.png"
/>
</div>
</TitleBanner>
<section className="inner profile">
<FlexRow className="uneven">
<div className="short">
<img src="/images/conference/expect/2018/mitch.jpg" />
<h4>Mitchel Resnick</h4>
<p>
Professor of Learning Research
<br />
Founder, MIT Scratch Team
<br />
MIT Media Lab
</p>
</div>
<div className="long">
<h2>Welcome to Scratch@MIT 2018!</h2>
<p className="intro">
The theme of this years Scratch conference is The Next{' '}
Generation. In choosing this phrase, we had two different{' '}
meanings in mind.
</p>
<p className="intro">
The theme is motivated, in part, by our work on the next generation{' '}
of Scratch. We plan to release this new version, called Scratch 3.0,{' '}
later this year. Scratch 3.0 will expand how, what, and where children{' '}
can create and learn with Scratch. At the conference, youll have lots{' '}
of opportunities to experiment and explore with prototype versions of{' '}
Scratch 3.0.
</p>
<p className="intro">
But even as we develop the next generation of software, our top{' '}
priority is always the next generation of children.
</p>
<p className="intro">
We continue to be amazed and delighted by all of the ways that{' '}
children around the world are creating and collaborating with Scratch.{' '}
As we see the outpouring of creativity in the Scratch community, we{' '}
become even more committed to developing a next generation of Scratch{' '}
that is truly worthy of the next generation of children.
</p>
<p className="intro">
At this summers Scratch conference, we look forward to hearing{' '}
your stories of how children are creating and learning with Scratch,{' '}
and how you are supporting them. Lets work together to expand{' '}
opportunities for all children, from all backgrounds, to imagine,{' '}
create, and collaborate &mdash; so they can shape the world of tomorrow.
</p>
</div>
</FlexRow>
</section>
<section className="keynote">
<div className="inner">
<div className="section-header">
<h2>Keynotes</h2>
</div>
<FlexRow>
<div className="card">
<div className="date">
<b>Thursday</b>
</div>
<h3>The Next Generation</h3>
<img
alt="Scratch Team Photo"
src="/images/conference/expect/scratch-team.jpg"
/>
<p>
<b>MIT Scratch Team</b>
<br />
<b>Mitchel Resnick (moderator)</b>
</p>
<p>
Join us for an inside look at the next generation of Scratch &mdash;{' '}
and a discussion of how Scratch is opening new opportunities for the next{' '}
generation of children around the world.
</p>
</div>
<div className="card">
<div className="date">
<b>Friday</b>
</div>
<h3>Interdisciplinary Creativity</h3>
<img
alt="Austin Kleon Photo"
src="/images/conference/expect/2018/austin_kleon.png"
/>
<p>
<b>Austin Kleon</b>
</p>
<img
alt="Karen Photo"
className="moderator"
src="/images/conference/expect/2018/karen.jpg"
/>
<p>
<b>Karen Brennan (moderator)</b>
</p>
</div>
<div className="card">
<div className="date">
<b>Saturday</b>
</div>
<h3>Growing Up with Scratch</h3>
<img
alt="Isabella, JT, and Jocelyn Photo"
src="/images/conference/expect/2018/growing-up-with-scratch-presenters.png"
/>
<p>
<b>Isabella Bruyere, JT Galla, &amp; Jocelyn Marencik</b>
</p>
<img
alt="Ricarose Photo"
className="moderator"
src="/images/conference/expect/2018/ricarose.png"
/>
<p>
<b>Ricarose Roque (moderator)</b>
</p>
<p>
What is it like to grow up with Scratch? Three long-time Scratch community{' '}
members share how they have used Scratch to express their interests, to make{' '}
friends, and to lead initiatives in their communities.
</p>
</div>
</FlexRow>
</div>
</section>
<section className="inner schedule">
<div className="section-header">
<div className="title">
<h2>Daily Schedules</h2>
</div>
<p className="callout">
<img
alt="July 25th Icon"
src="/svgs/conference/expect/july25-icon.svg"
/>
<b>Wednesday at 6:00p</b>&nbsp;&nbsp;Early check-in and opening reception
</p>
</div>
<FlexRow>
<table>
<tbody>
<tr>
<th>
<img
alt="July 26th Icon"
src="/svgs/conference/expect/july26-icon.svg"
/>
<h3>Thursday</h3>
</th>
</tr>
<tr>
<td>
<b>8:30a</b>
<p>Breakfast (provided)</p>
</td>
</tr>
<tr>
<td>
<b>9:30a</b>
<p>Keynote Presentation</p>
</td>
</tr>
<tr>
<td>
<b>11:00a</b>
<p>Morning Workshops</p>
</td>
</tr>
<tr>
<td>
<b>12:30p</b>
<p>Lunch (provided)</p>
</td>
</tr>
<tr>
<td>
<b>2:00p</b>
<p>Afternoon Workshops</p>
</td>
</tr>
<tr>
<td>
<b>4:00p</b>
<p>Poster Sessions</p>
</td>
</tr>
<tr>
<td>
<b>7:00p</b>
<p>Self-organized dinner excursions</p>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>
<img
alt="July 27th Icon"
src="/svgs/conference/expect/july27-icon.svg"
/>
<h3>Friday</h3>
</th>
</tr>
<tr>
<td>
<b>8:30a</b>
<p>Breakfast (provided)</p>
</td>
</tr>
<tr>
<td>
<b>9:30a</b>
<p>Keynote Presentation</p>
</td>
</tr>
<tr>
<td>
<b>11:00a</b>
<p>Morning Workshops, Panels, and Ignite Talks</p>
</td>
</tr>
<tr>
<td>
<b>12:00p</b>
<p>Lunch (provided)</p>
</td>
</tr>
<tr>
<td>
<b>1:30p</b>
<p>Early Afternoon Workshops, Panels, and Ignite Talks</p>
</td>
</tr>
<tr>
<td>
<b>3:00p</b>
<p>Late Afternoon Workshops, Panels, and Ignite Talks</p>
</td>
</tr>
<tr>
<td>
<b>4:30p</b>
<p>Poster Sessions</p>
</td>
</tr>
<tr>
<td>
<b>6:30p</b>
<p>Conference Dinner</p>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>
<img
alt="July 28th Icon"
src="/svgs/conference/expect/july28-icon.svg"
/>
<h3>Saturday</h3>
</th>
</tr>
<tr>
<td>
<b>8:30a</b>
<p>Breakfast (provided)</p>
</td>
</tr>
<tr>
<td>
<b>9:30a</b>
<p>Keynote Presentation</p>
</td>
</tr>
<tr>
<td>
<b>11:00a</b>
<p>Morning Workshops, Panels and Ignite Talks</p>
</td>
</tr>
<tr>
<td>
<b>12:00p</b>
<p>Lunch (provided) and Wrap-up Session</p>
</td>
</tr>
<tr>
<td>
<b>1:30p</b>
<p>End of Conference</p>
</td>
</tr>
</tbody>
</table>
</FlexRow>
</section>
</div>
);
render(<Page><ConferenceExpectations /></Page>, document.getElementById('app'));

View file

@ -0,0 +1,197 @@
@import "../../../../colors";
@import "../../../../frameless";
.expect {
.flex-row {
align-items: flex-start;
justify-content: space-between;
.card {
width: $cols4;
p {
text-align: left;
}
}
}
.profile {
img {
border-radius: 8em;
width: 80%;
}
h4 {
margin-top: 1.2rem;
}
@media only screen and (max-width: $tablet - 1) {
img {
width: 50%;
}
h2 {
margin: 20px 0;
text-align: center;
font-size: 1.7rem;
}
}
@media only screen and (max-width: $desktop - 1) {
.uneven {
flex-direction: column;
align-items: center;
}
}
}
.keynote {
background-color: $ui-purple;
padding: 48px 0 64px 0;
width: 100%;
h2,
h3,
b,
p {
color: $ui-white;
}
h2 {
margin-bottom: 32px;
}
h3 {
margin: 15px 0;
}
img {
width: 100%;
&.moderator {
width: 50%;
}
}
.date {
b {
border-radius: 20px;
background-color: $ui-orange;
padding: 5px 15px;
font-size: .85rem;
}
margin: 15px 0;
}
@media only screen and (max-width: $desktop - 1) {
.flex-row {
flex-direction: column;
align-items: center;
.card {
margin-top: 25px;
text-align: left;
}
}
}
}
.schedule {
.title {
display: flex;
margin-top: 20px;
justify-content: space-between;
align-items: center;
h2 {
margin: 0;
}
}
img {
width: 30px;
}
.callout {
display: flex;
padding: .85rem;
align-items: center;
img {
margin-right: 30px;
}
}
table {
width: $cols4;
th {
display: flex;
border-bottom: thin solid $ui-border;
padding: 2.5%;
align-items: center;
justify-content: flex-start;
h3 {
margin: 0;
}
img {
margin-right: 30px;
}
}
td {
display: flex;
border-bottom: thin solid $ui-border;
padding: 2.5%;
height: 60px;
align-items: center;
b {
width: 30%;
line-height: 1.7em;
}
p {
margin: 0;
width: 70%;
}
}
}
@media only screen and (max-width: $mobile - 1) {
.flex-row {
table {
width: 100%;
}
}
}
@media only screen and (min-width: $mobile) and (max-width: $desktop - 1) {
.flex-row {
table {
width: $cols6;
}
}
}
@media only screen and (max-width: $desktop - 1) {
.flex-row {
flex-direction: column;
align-items: center;
table {
margin-top: 50px;
text-align: left;
th {
justify-content: center;
}
}
}
}
}
}

View file

@ -1,211 +1,83 @@
const FormattedDate = require('react-intl').FormattedDate;
const FormattedMessage = require('react-intl').FormattedMessage;
const React = require('react'); const React = require('react');
const render = require('../../../../lib/render.jsx'); const render = require('../../../../lib/render.jsx');
const Button = require('../../../../components/forms/button.jsx');
const FlexRow = require('../../../../components/flex-row/flex-row.jsx'); const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
const Page = require('../../../../components/page/conference/2018/page.jsx'); const Page = require('../../../../components/page/conference/2018/page.jsx');
const TitleBanner = require('../../../../components/title-banner/title-banner.jsx'); const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
require('../../../../components/forms/button.scss');
require('./index.scss'); require('./index.scss');
const ConferenceSplash = () => ( const ConferenceSplash = () => (
<div className="index mod-2018"> <div className="index mod-2016">
<TitleBanner className="mod-conference"> <TitleBanner className="mod-conference">
<h1> <h1>
<FormattedMessage id="conference-2018.subtitle" /> Scratch: The Next Generation
</h1> </h1>
<h3> <h3>
<FormattedMessage id="conference-2018.dateDesc" /> July 26-28, 2018 | Cambridge, MA, USA
</h3> </h3>
<h3> <h3>
<FormattedMessage id="conference-2018.soldOut" /> (Opening Reception on Evening of July 25)
</h3> </h3>
<h4> <h3>
<FormattedMessage id="conference-2018.comingSoon" /> Scratch@MIT is sold out!
</h4> </h3>
<p>
<a href="/conference/2018/schedule">
<Button>
See the Schedule
</Button>
</a>
</p>
</TitleBanner> </TitleBanner>
<div className="inner"> <section className="inner">
<section className="info"> <FlexRow>
<FlexRow className="uneven"> <div>
<div className="long"> <h3>
<a href="/conference/2018/expect">
<img
alt="expect-image"
src="/images/conference/expect/what-to-expect.png"
/>
What to Expect
</a>
</h3>
<p> <p>
<FormattedMessage id="conference-2018.desc1" /> Learn more about participating in Scratch@MIT
</p> </p>
</div>
<div>
<h3>
<a href="/conference/2018/plan">
<img
alt="plan-image"
src="/images/conference/plan/plan-your-visit.png"
/>
Plan Your Visit
</a>
</h3>
<p> <p>
<FormattedMessage id="conference-2018.desc2" /> Information on traveling, staying, and exploring around the Media Lab
</p> </p>
</div> </div>
<div className="short"> <div>
<h3>
<a href="/conference/2018/schedule">
<img
alt="schedule"
src="/images/conference/schedule/2018/schedule.png"
/>
Schedule
</a>
</h3>
<p> <p>
<b><FormattedMessage id="conference-2018.date" /></b>{' '} Full schedule of events and sessions
{/* eslint-disable react/jsx-sort-props */}
<FormattedDate
value={new Date(2018, 6, 26)}
year="numeric"
month="long"
day="2-digit"
/>
{' - '}
<FormattedDate
value={new Date(2018, 6, 28)}
year="numeric"
month="long"
day="2-digit"
/>
{/* eslint-enable react/jsx-sort-props */}
<br />
<FormattedMessage id="conference-2018.dateDescMore" />
<br />
<b><FormattedMessage id="conference-2018.location" /></b>{' '}
<FormattedMessage id="conference-2018.locationDetails" />
</p> </p>
</div> </div>
</FlexRow> </FlexRow>
<FlexRow className="uneven">
<div className="long">
<h3 id="questions"><FormattedMessage id="conference-2018.questionsTitle" /></h3>
<div>
<p className="conf2018-question">
<FormattedMessage id="conference-2018.soldoutQ" />
</p>
<p className="conf2018-answer">
<FormattedMessage id="conference-2018.soldoutAns" />
</p>
</div>
<div>
<p className="conf2018-question">
<FormattedMessage id="conference-2018.submissionQ" />
</p>
<p className="conf2018-answer">
<FormattedMessage id="conference-2018.submissionAns" />
</p>
</div>
<div>
<p className="conf2018-question">
<FormattedMessage id="conference-2018.regQ" />
</p>
<p className="conf2018-answer">
<FormattedMessage id="conference-2018.regAns" />
</p>
</div>
<div>
<p className="conf2018-question">
<FormattedMessage id="conference-2018.accommodationsQ" />
</p>
<p className="conf2018-answer">
<FormattedMessage
id="conference-2018.accommodationsAns1"
values={{
marriottLink: (
<a href="http://www.marriott.com/hotels/travel/boscb-boston-marriott-cambridge/">
Boston Marriott Cambridge
</a>
),
holidayinnLink: (
<a href="http://www.hiexpress.com/hotels/us/en/reservation/searchresult?qAdlt=1&qBrs=6c.hi.ex.rs.ic.cp.in.sb.cw.cv.ul.vn&qChld=0&qDest=CAMBRIDGE%2CMA%2CUnited+States&qFRA=1&qGRM=0&qIta=99504425&qPSt=0&qRRSrt=rt&qRef=df&qRms=1&qRpn=1&qRpp=12&qSHp=1&qSmP=3&qSrt=sBR&qWch=0&srb_u=1&icdv=99504425&dp=true">
Holiday Inn Express and Suites
</a>
),
residenceinnLink: (
<a href="http://www.marriott.com/hotels/travel/boscm-residence-inn-boston-cambridge/">
Residence Inn
</a>
),
lemeridienLink: (
<a href="http://www.starwoodhotels.com/lemeridien/property/overview/index.html?propertyID=3253&language=en_US">
Le Meridien
</a>
)
}}
/>
</p>
<p className="conf2018-answer">
<FormattedMessage
id="conference-2018.accommodationsAns2"
values={{
acLink: (
<a href="http://www.marriott.com/meeting-event-hotels/group-corporate-travel/groupCorp.mi?resLinkData=Scratch%20Conference%5EBOSAR%60sccscca%7Csccsccb%60229%60USD%60false%604%607/25/18%607/28/18%607/4/18&app=resvlink&stop_mobi=yes">
AC Hotel Boston Cambridge
</a>
),
doubletreeLink: (
<a href="https://secure3.hilton.com/en_US/dt/reservation/book.htm?inputModule=HOTEL&ctyhocn=BOSCODT&spec_plan=CDTMIT&arrival=20180725&departure=20180728&cid=OM,WW,HILTONLINK,EN,DirectLink&fromId=HILTONLINKDIRECT">
DoubleTree by Hilton Hotel Boston - Downtown
</a>
),
hotelbostonLink: (
<a href="https://www.hotelboston.com/">
Hotel Boston
</a>
),
mitLink: (
<a href="http://www.media.mit.edu/contact/accommodations">
<FormattedMessage id="conference-2018.here" />
</a>
)
}}
/>
</p>
</div>
<div>
<p className="conf2018-question">
<FormattedMessage id="conference-2018.letterQ" />
</p>
<p className="conf2018-answer">
<FormattedMessage
id="conference-2018.letterAns"
values={{
emailLink: (
<a href="mailto:conference@scratch.mit.edu">
conference@scratch.mit.edu
</a>
)
}}
/>
</p>
</div>
<div>
<p className="conf2018-question">
<FormattedMessage id="conference-2018.preConfQ" />
</p>
<p className="conf2018-answer">
<FormattedMessage id="conference-2018.preConfAns" />
</p>
</div>
<div>
<p className="conf2018-question">
<FormattedMessage id="conference-2018.bringQ" />
</p>
<p className="conf2018-answer">
<FormattedMessage id="conference-2018.bringAns" />
</p>
</div>
<div>
<p className="conf2018-question">
<FormattedMessage id="conference-2018.moreQ" />
</p>
<p className="conf2018-answer">
<FormattedMessage
id="conference-2018.moreAns"
values={{
emailLink: (
<a href="mailto:conference@scratch.mit.edu">
conference@scratch.mit.edu
</a>
)
}}
/>
</p>
</div>
</div>
</FlexRow>
</section> </section>
</div> </div>
</div>
); );
render(<Page><ConferenceSplash /></Page>, document.getElementById('app')); render(<Page><ConferenceSplash /></Page>, document.getElementById('app'));

View file

@ -1,6 +1,11 @@
@import "../../../../colors"; @import "../../../../colors";
@import "../../../../frameless"; @import "../../../../frameless";
#view {
background-color: $ui-light-gray;
min-height: initial;
}
.index { .index {
.title-banner { .title-banner {
margin-bottom: 0; margin-bottom: 0;
@ -18,12 +23,12 @@
color: $type-white; color: $type-white;
} }
h4 { h1 {
font-weight: normal; font-size: 4rem;
} }
p { p {
margin-top: 3rem; margin-top: 1rem;
&.sub-button { &.sub-button {
margin-top: 1rem; margin-top: 1rem;
@ -41,7 +46,9 @@
a { a {
button { button {
background-color: $ui-white;
color: $ui-blue;
font-size: 1rem;
} }
} }
} }
@ -69,46 +76,23 @@
} }
} }
.flex-row { .flex-row {
align-items: flex-start; align-items: flex-start;
justify-content: space-between;
&.uneven { div {
width: 28%;
text-align: center;
img { img {
width: 100%; display: block;
margin: auto;
max-width: 125px;
} }
@media only screen and (max-width: $tablet - 1) { @media only screen and (max-width: $tablet - 1) {
img { margin: .5rem;
width: 30%; width: 125px;
}
}
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
img {
width: 70%;
}
}
}
}
.info {
text-align: left;
.conf2018-question {
margin-bottom: 0;
font-weight: 500;
}
.conf2018-answer {
margin-top: 0;
}
@media only screen and (max-width: $desktop - 1) {
.uneven {
.short {
width: 70%;
}
} }
} }
} }
@ -121,133 +105,3 @@
} }
} }
} }
.conf2018-panel {
border-bottom: 1px solid $ui-border;
}
.conf2018-panel.mod-last {
border-bottom: 0;
}
.flex-row.conf2018-panel-title {
justify-content: flex-start;
align-items: center;
}
.conf2018-panel-desc {
margin: 2rem 0;
}
td {
padding: .75rem 1.25rem;
vertical-align: top;
}
.conf2018-panel-row-icon-image {
margin-top: .125rem;
width: 1rem;
height: 1rem;
}
.button.mod-register {
padding: .75em 3.5em;
text-align: center;
color: $type-white;
font-size: 1rem;
font-weight: 500;
}
@media only screen and (max-width: $mobile - 1) {
.index.mod-2018 {
text-align: left;
}
.title-banner-image.mod-2018 {
height: 10rem;
}
.conf2018-panel,
.title-banner-h3.mod-2018 {
width: initial;
}
.conf2018-panel {
margin: auto .5rem;
}
.title-banner-h3.mod-2018 {
margin: 1rem .5rem .5rem;
font-size: 1.1rem;
}
.flex-row.conf2018-panel-title {
flex-direction: row;
}
.conf2018-panel-title-text {
max-width: 14rem;
}
.conf2018-panel-row > td {
padding: .75rem .375rem .75rem 0;
}
}
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.index.mod-2018 {
text-align: left;
}
.title-banner-image.mod-2018 {
height: 10rem;
}
.conf2018-panel,
.title-banner-h3.mod-2018 {
margin: auto .5rem ;
width: initial;
}
.title-banner-h3.mod-2018 {
font-size: 1.1rem;
}
.flex-row.conf2018-panel-title {
flex-direction: row;
}
.conf2018-panel-title-text {
max-width: 18.75rem;
}
.button.mod-register {
padding: .75em 2em;
}
}
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
.index.mod-2018 {
text-align: left;
}
.title-banner-image.mod-2018 {
height: 15rem;
}
.conf2018-panel,
.title-banner-h3.mod-2018 {
margin: auto;
width: 38.75rem;
}
.title-banner-h3.mod-2018 {
font-size: 1.1rem;
}
.button.mod-register {
padding: .75em 1.25em;
}
}

View file

@ -1,57 +0,0 @@
{
"conference-2018.title": "Scratch Conference 2018:",
"conference-2018.subtitle": "The Next Generation",
"conference-2018.dateDesc": "July 26-28, 2018 | Cambridge, MA, USA",
"conference-2018.dateDescMore": " (with opening reception the evening of July 25)",
"conference-2018.locationDetails": "MIT Media Lab, Cambridge, MA",
"conference-2018.seeBelow": "Learn more about conference dates and locations below.",
"conference-2018.date": "When:",
"conference-2018.location": "Where:",
"conference-2018.desc1": "Join us for the Scratch@MIT conference, a playful gathering of educators, researchers, developers, and other members of the worldwide Scratch community.",
"conference-2018.desc2": "We're planning a very participatory conference, with an entire day of hands-on workshops and lots of opportunities for peer-to-peer discussion and collaboration. The conference is intended primarily for adults who support young people learning Scratch.",
"conference-2018.registrationDate": "Registration opens March 1, 2018.",
"conference-2018.registerNow": "Register Now!",
"conference-2018.soldOut": "Scratch@MIT is sold out!",
"conference-2018.comingSoon": "Full event schedule coming soon",
"conference-2018.sessionDesc": "Interested in offering a session? We invite four types of proposals:",
"conference-2018.sessionItem1Title": "Poster/demonstration (90 minutes).",
"conference-2018.sessionItem1Desc": "Show off your project in an exhibition setting, alongside other presenters. You will be provided with display space for a poster and table space for a computer or handouts.",
"conference-2018.sessionItem2Title": "Hands-on workshop (90 minutes).",
"conference-2018.sessionItem2Desc": "Engage participants in hands-on activities, highlighting new ways of creating and collaborating with Scratch.",
"conference-2018.sessionItem3Title": "Interactive panel (60 minutes).",
"conference-2018.sessionItem3Desc": "Discuss a Scratch-related topic in a panel with three or more people. Your proposal should describe how you will engage the audience during the session.",
"conference-2018.sessionItem4Title": "Ignite talk (5 minutes).",
"conference-2018.sessionItem4Desc": "Share what you've been doing in a short, lively presentation.",
"conference-2018.deadline": "Deadline for proposals is February 5, 2018.",
"conference-2018.proposal": " Submit Your Proposal",
"conference-2018.proposalDeadline": "Deadline for proposals: February 5",
"conference-2018.proposalAccept": "Notification of acceptance: March 1",
"conference-2018.registrationTitle": "Registration:",
"conference-2018.registrationEarly": "Early Bird Registration (March 1-May 1): $200",
"conference-2018.registrationStandard": "Standard Registration (after May 1): $300",
"conference-2018.questions": "Questions? Contact the Scratch Team at {emailLink}",
"conference-2018.questionsTitle": "Questions:",
"conference-2018.soldoutQ": "The conference is sold out. What can I do?",
"conference-2018.soldoutAns": "Scratch@MIT is sold out and at capacity. Regrettably, we are unable to add any additional guests. Please keep in mind that you must have registered on Eventbrite to attend Scratch@MIT; people who are not registered / do not have a ticket will not be able to attend the conference.",
"conference-2018.submissionQ": "I missed the submission deadline. Can I still submit a proposal for the conference?",
"conference-2018.submissionAns": "We are no longer accepting proposal submissions.",
"conference-2018.regQ": "I can only attend one day of the conference. Do you offer single-day registration?",
"conference-2018.regAns": "Sorry, we are not offering single-day tickets.",
"conference-2018.accommodationsQ": "I want to plan my visit. Do you have suggestions for accommodations?",
"conference-2018.accommodationsAns1": "Yes, MIT partners with several hotels in the area who offer discounts to participants attending MIT events, including: {marriottLink} (0.4 miles from the MIT Media Lab), {holidayinnLink} (1.6 miles), {residenceinnLink} (0.3 miles), and {lemeridienLink} (0.9 miles). To reserve a room at one of these hotels, call the hotel and request the MIT discount. Advance booking is strongly recommended, as summer is a busy time in Boston. All MIT rates are subject to availability.",
"conference-2018.accommodationsAns2": "If you are looking for additional accommodation options, we also recommend the {acLink} (7.1 miles), {doubletreeLink} (3.3 miles), and {hotelbostonLink} with the code MITSC2018 (5.3 mile). You might also consider home-share options such as Airbnb. Find an extended list of accommodations {mitLink}.",
"conference-2018.here": "here",
"conference-2018.letterQ": "Can I get a visa letter?",
"conference-2018.letterAns": "Yes. Contact us at {emailLink}, and we can email you a letter.",
"conference-2018.preConfQ": "In previous years, there was an event on Wednesday evening before the conference. Will you be hosting something similar this year?",
"conference-2018.preConfAns": "There will be an informal, optional reception the evening of Wednesday, July 25. Participants may register early at this time as well.",
"conference-2018.bringQ": "What should I bring?",
"conference-2018.bringAns": "Plan to bring your personal device (laptops are preferred) and power cord. Presenters should plan to bring all additional presentation materials (we will provide projectors and screens). Snacks and beverages will be available throughout the day.",
"conference-2018.moreQ": "Have additional questions?",
"conference-2018.moreAns": "Contact the Scratch Team at {emailLink}."
}

View file

@ -0,0 +1,343 @@
const bindAll = require('lodash.bindall');
const React = require('react');
const Button = require('../../../../components/forms/button.jsx');
const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
const render = require('../../../../lib/render.jsx');
const Page = require('../../../../components/page/conference/2018/page.jsx');
require('./plan.scss');
class ConferencePlan extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'toggleQuestion'
]);
this.state = {
dorm: false
};
}
toggleQuestion (element) {
this.setState({element: !this.state[element]});
}
render () {
return (
<div className="plan">
<TitleBanner className="mod-conference">
<h1>
Plan Your Visit
</h1>
<div className="title-icon">
<img
alt="plan-image"
src="/images/conference/plan/plan-your-visit.png"
/>
</div>
</TitleBanner>
<div className="inner">
<section className="lodging">
<FlexRow className="uneven">
<div className="long">
<h2>Lodging</h2>
<p>
MIT partners with several hotels in the area who offer discounts to{' '}
participants attending MIT events, including:
</p>
<FlexRow>
<FlexRow className="column">
<p>
<a href="http://bit.ly/P0kTKy">
Boston Marriott Cambridge
</a>
<br />
<span>(Kendall Square, 0.4 miles from the MIT Media Lab)</span>
</p>
<p>
<a href="http://bit.ly/2459rhL">
Holiday Inn Express and Suites
</a>
<br />
<span>(Lechmere Station, 1.6 miles)</span>
</p>
</FlexRow>
<FlexRow className="column">
<p>
<a href="http://bit.ly/1qbQNmO">
Residence Inn
</a>
<br />
<span>(Kendall Square, 0.3 miles)</span>
</p>
<p>
<a href="http://lemerid.ie/1Kt3TDF">
Le Meridien
</a>
<br />
<span>(between Central and Kendall Squares, 0.9 miles)</span>
</p>
</FlexRow>
</FlexRow>
<p>
To reserve a room at one of these hotels, call the hotel and request the{' '}
&#34;MIT discount&#34;. Advance booking is strongly recommended, as{' '}
summer is a busy time in Boston. All MIT rates are subject to availability.
</p>
<p>
If you are looking for additional accommodation options, we also recommend the {' '}
<a href="http://www.marriott.com/meeting-event-hotels/group-corporate-travel/groupCorp.mi?resLinkData=Scratch%20Conference%5EBOSAR%60sccscca%7Csccsccb%60229%60USD%60false%604%607/25/18%607/28/18%607/4/18&app=resvlink&stop_mobi=yes">
AC Hotel Boston Cambridge
</a> (7.1 miles from the MIT Media Lab),{' '}
<a href="https://secure3.hilton.com/en_US/dt/reservation/book.htm?inputModule=HOTEL&ctyhocn=BOSCODT&spec_plan=CDTMIT&arrival=20180725&departure=20180728&cid=OM,WW,HILTONLINK,EN,DirectLink&fromId=HILTONLINKDIRECT">
DoubleTree by Hilton Hotel Boston - Downtown
</a> (3.3 miles),{' '}
and <a href="https://www.hotelboston.com/">
Hotel Boston
</a> with the code MITSC2018 (5.3 miles).{' '}
</p>
<p>
You might also consider home-share options such as Airbnb.
</p>
</div>
<div className="short">
<img
alt="Lodging Illustration"
src="/images/conference/plan/lodging.png"
/>
</div>
</FlexRow>
</section>
<section className="transportation">
<FlexRow className="uneven">
<div className="long">
<h2>Transportation</h2>
<p>
The <a href="https://whereis.mit.edu/?go=E14">MIT Media Lab</a> is located{' '}
in Kendall Square, Cambridge, MA, a 5-minute walk from the Kendall/MIT stop of{' '}
MBTA Red Line subway. Cambridge is a bike-friendly, walkable city, and{' '}
public transportation is encouraged. The MBTA provides free services from{' '}
Boston Logan Airport to the South Station subway stop as well.
</p>
<p>
Learn about{' '}
<a href="https://www.media.mit.edu/posts/directions-and-parking/">
driving, parking, and public transportation options
</a> around the MIT Media Lab.
</p>
<p>
<a href="http://web.mit.edu/facilities/transportation/parking/visitors/public_parking.html">
Public parking facilities
</a> are available near campus for a fee.
</p>
<p>
Learn about additional{' '}
<a href="http://www.cityofboston.gov/transportation/modes.asp">
transportation options in Cambridge and Boston
</a>.
</p>
</div>
<div className="short">
<img
alt="Transportation Illustration"
src="/images/conference/plan/transportation.png"
/>
</div>
</FlexRow>
</section>
<section className="explore">
<h2>Exploring Cambridge</h2>
<div>
<p>
Boston is a city full of history and diverse neighborhoods. Check some{' '}
of these attractions to experience the citys rich cultural offerings:
</p>
<ul>
<li>
<a href="http://www.trolleytours.com/boston/">
Beantown Trolley Tour
</a>
</li>
<li>
<a href="http://www.bostonducktours.com/">
Boston Duck Tours
</a>
</li>
<li>
<a href="http://www.bostonteapartyship.com/">
Boston Tea Party Ship &amp; Museum
</a>
</li>
<li>
<a href="http://www.faneuilhallmarketplace.com/">
Faneuil Hall Marketplace
</a>
</li>
<li>
<a href="http://www.thefreedomtrail.org/">
Freedom Trail Walking Tours
</a>
</li>
<li>
<a href="http://www.hmnh.harvard.edu/">
Harvard Museum of Natural History
</a>
</li>
<li>
<a href="https://www.icaboston.org/">
Institute of Contemporary Art
</a>
</li>
<li>
<a href="http://www.gardnermuseum.org/home">
Isabella Stewart Gardner Museum
</a>
</li>
<li>
<a href="http://www.jfklibrary.org/">
John F. Kennedy Library &amp; Museum
</a>
</li>
<li>
<a href="http://web.mit.edu/museum/">
MIT Museum
</a>
</li>
<li>
<a href="http://www.mfa.org/">
Museum of Fine Arts
</a>
</li>
<li>
<a href="http://www.mos.org/">
Museum Of Science
</a>
</li>
<li>
<a href="http://www.neaq.org/index.php">
New England Aquarium
</a>
</li>
<li>
<a href="https://ussconstitutionmuseum.org/">
USS Constitution
</a>
</li>
</ul>
</div>
<div>
<p>
Try some Scratch Team favorites for snacking and dining around the Lab:
</p>
<ul>
<li>
A4 Pizza
</li>
<li>
Abigails
</li>
<li>
Bailey and Sage
</li>
<li>
Clover
</li>
<li>
Commonwealth
</li>
<li>
Legal Seafood
</li>
<li>
Meadhall
</li>
<li>
Sebastians
</li>
<li>
Tatte
</li>
<li>
Za
</li>
</ul>
</div>
</section>
<section className="faq last">
<FlexRow className="uneven">
<div className="long">
<h2>FAQ</h2>
<dl>
<dt>
The conference is sold out. What can I do?
</dt>
<dd>
Scratch@MIT is sold out and at capacity. Regrettably, we are{' '}
unable to add any additional guests. Please keep in mind that{' '}
you must have registered on Eventbrite to attend Scratch@MIT;{' '}
people who are not registered / do not have a ticket will not be{' '}
able to attend the conference.
</dd>
<dt>
I missed the submission deadline. Can I still submit a proposal for{' '}
the conference?
</dt>
<dd>
We are no longer accepting proposal submissions.
</dd>
<dt>
I can only attend one day of the conference. Do you offer single-day{' '}
registration?
</dt>
<dd>
Sorry, we are not offering single-day tickets.
</dd>
<dt>
Can I receive a visa letter?
</dt>
<dd>
Yes. Contact us at{' '}
<a href="mailto:conference@scratch.mit.edu">conference@scratch.mit.edu</a>{' '}
and we can email you a letter.
</dd>
<dt>
In previous years, there was an event on Wednesday evening before the{' '}
conference. Will you be hosting something similar this year?
</dt>
<dd>
There will be an informal, optional reception the evening of Wednesday,{' '}
July 25. Participants may register early at this time as well.
</dd>
<dt>
What should I bring?
</dt>
<dd>
Plan to bring your personal device (laptops are preferred) and power cord.{' '}
Presenters should plan to bring all additional presentation materials{' '}
(we will provide projectors and screens). Snacks and beverages will be{' '}
available throughout the day.
</dd>
</dl>
</div>
<div className="short">
<h3>Have Additional Questions?</h3>
<a href="mailto:conference@scratch.mit.edu">
<Button>Email Us</Button>
</a>
</div>
</FlexRow>
</section>
</div>
</div>
);
}
}
render(<Page><ConferencePlan /></Page>, document.getElementById('app'));

View file

@ -0,0 +1,113 @@
@import "../../../../colors";
@import "../../../../frameless";
.plan {
section {
border-bottom: 2px solid $ui-border;
&.last {
border-bottom: 0;
}
}
.flex-row {
align-items: flex-start;
justify-content: space-between;
&.uneven {
img {
width: 100%;
}
@media only screen and (max-width: $tablet - 1) {
img {
width: 30%;
}
}
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
img {
width: 70%;
}
}
}
}
.lodging {
text-align: left;
@media only screen and (max-width: $desktop - 1) {
.uneven {
.short {
display: none;
}
}
}
}
.transportation {
.uneven {
align-items: center;
}
@media only screen and (max-width: $desktop - 1) {
.flex-row {
flex-direction: column-reverse;
}
}
}
.explore {
div {
margin-top: 30px;
}
ul {
display: flex;
max-height: 23rem;
flex-flow: column wrap;
justify-content: flex-start;
}
@media only screen and (max-width: $tablet - 1) {
ul {
max-height: 100%;
}
}
@media only screen and (max-width: $desktop - 1) {
div {
text-align: left;
}
}
}
.faq {
dl {
dt {
font-weight: bold;
}
dd {
margin: 8px 0 32px 0;
}
}
.short {
margin-top: 64px;
border: 2px solid $ui-border;
border-radius: 4px;
background-color: $ui-white;
padding: 16px;
text-align: center;
h3 {
margin: 0;
}
@media only screen and (max-width: $tablet - 1) {
margin-top: 0;
}
}
}
}

View file

@ -0,0 +1,186 @@
const bindAll = require('lodash.bindall');
const classNames = require('classnames');
const connect = require('react-redux').connect;
const PropTypes = require('prop-types');
const React = require('react');
const scheduleActions = require('../../../../redux/conference-schedule.js');
const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
const SubNavigation = require('../../../../components/subnavigation/subnavigation.jsx');
const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
const render = require('../../../../lib/render.jsx');
const Page = require('../../../../components/page/conference/2018/page.jsx');
require('./schedule.scss');
class ConferenceSchedule extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'handleScheduleChange',
'renderChunkItems'
]);
}
componentDidMount () {
const day = window.location.hash.substr(1) || 'thursday';
this.handleScheduleChange(day);
}
handleScheduleChange (day) {
window.history.replaceState(history.state, '', `#${day}`);
this.props.dispatch(scheduleActions.startGetSchedule(day));
}
renderChunkItems (timeSlot) {
return timeSlot.map(item => {
if (item.Presenter) {
return (
<a
className="item-url"
href={item.uri}
>
<div
className="agenda-item"
key={item.rowid}
>
<h3>{item.Title}</h3>
<FlexRow>
<p>
<img
alt="time icon"
src="/svgs/conference/schedule/time-icon.svg"
/>
{item.Start} &ndash; {item.End}
</p>
</FlexRow>
<FlexRow>
<p>
<img
alt="presenter icon"
src="/svgs/conference/schedule/presenter-icon.svg"
/>
{item.Presenter}
</p>
<p>
<img
alt="event icon"
src="/svgs/conference/schedule/event-icon.svg"
/>
{item.Type}
</p>
</FlexRow>
</div>
</a>
);
}
return (
<div
className="agenda-item no-click"
key={item.rowid}
>
<h3>{item.Title}</h3>
<FlexRow>
<p>{item.Start} &ndash; {item.End}</p>
<p>{item.Location}</p>
</FlexRow>
</div>
);
});
}
render () {
const tabClasses = {
thursday: classNames({
selected: (this.props.conferenceSchedule.day === 'thursday')
}),
friday: classNames({
selected: (this.props.conferenceSchedule.day === 'friday')
}),
saturday: classNames({
last: true,
selected: (this.props.conferenceSchedule.day === 'saturday')
})
};
const handleScheduleMethods = {
thursday: () => {
this.handleScheduleChange('thursday');
},
friday: () => {
this.handleScheduleChange('friday');
},
saturday: () => {
this.handleScheduleChange('saturday');
}
};
return (
<div className="schedule">
<TitleBanner className="mod-conference">
<h1>
Schedule
</h1>
</TitleBanner>
<SubNavigation>
<li
className={tabClasses.thursday}
onClick={handleScheduleMethods.thursday}
>
<img
alt="July 26th Icon"
src="/svgs/conference/expect/july26-icon.svg"
/>
<span>Thursday</span>
</li>
<li
className={tabClasses.friday}
onClick={handleScheduleMethods.friday}
>
<img
alt="July 27th Icon"
src="/svgs/conference/expect/july27-icon.svg"
/>
<span>Friday</span>
</li>
<li
className={tabClasses.saturday}
onClick={handleScheduleMethods.saturday}
>
<img
alt="July 28th Icon"
src="/svgs/conference/expect/july28-icon.svg"
/>
<span>Saturday</span>
</li>
</SubNavigation>
<div className="inner">
{this.props.conferenceSchedule.timeSlots.map(timeSlot => ([
<h2
className="breaking-title"
key={timeSlot.info.name}
>
<span>{timeSlot.info.name} {timeSlot.info.time}</span>
</h2>,
this.renderChunkItems(timeSlot.items)
]))}
</div>
</div>
);
}
}
ConferenceSchedule.propTypes = {
conferenceSchedule: PropTypes.object, // eslint-disable-line react/forbid-prop-types
dispatch: PropTypes.func
};
const mapStateToProps = state => ({
conferenceSchedule: state.conferenceSchedule
});
const ConnectedSchedule = connect(mapStateToProps)(ConferenceSchedule);
render(
<Page><ConnectedSchedule /></Page>,
document.getElementById('app'),
{conferenceSchedule: scheduleActions.scheduleReducer}
);

View file

@ -0,0 +1,150 @@
@import "../../../../colors";
@import "../../../../frameless";
.schedule {
.title-banner {
margin-bottom: 0;
}
.sub-nav {
z-index: -1;
box-shadow: 0 2px 5px $ui-dark-gray;
padding: 0;
li {
margin: 0;
border: 0;
border-top: 4px solid transparent;
border-left: 2px solid $active-gray;
border-radius: 0;
padding: .75em 1em;
color: $type-gray;
font-size: 1rem;
&.last {
border-right: 2px solid $active-gray;
}
&:hover,
&:active,
&.selected {
border-top: 4px solid $ui-orange;
border-left: 2px solid $active-gray;
box-shadow: none;
background-color: inherit;
}
&.selected {
font-weight: 700;
}
}
img {
margin-right: .5em;
width: 2em;
vertical-align: middle;
}
}
.inner {
h2 {
&.breaking-title {
margin: 4rem 0 2rem 0;
border-bottom: 1px solid $ui-dark-gray;
width: 100%;
height: 1.7rem; // match the line-height for h2
text-align: center;
}
span {
background-color: $background-color;
padding: 0 10px;
}
}
a {
&.item-url {
display: block;
&:hover {
background-color: lighten($ui-blue, 40);
}
}
}
.agenda-item {
margin: 1rem 0;
border: 1px solid $active-gray;
border-radius: 5px;
padding: 1.25rem 2.25rem;
&.no-click {
background-color: $ui-gray;
}
.flex-row {
margin: .5rem 0;
justify-content: space-between;
align-items: flex-start;
p {
margin: 0;
width: 48%;
text-align: left;
}
img {
margin-right: .5rem;
width: 1rem;
height: 1rem;
}
}
}
}
@media only screen and (max-width: $mobile - 1) {
.sub-nav {
flex-wrap: nowrap;
}
.inner {
h2 {
&.breaking-title {
margin: 2rem 0 2rem;
height: 100%;
font-size: 1.5rem;
}
}
.agenda-item {
h3 {
font-size: 1.2rem;
}
}
}
}
@media only screen and (max-width: $tablet - 1) {
.inner {
h2 {
&.breaking-title {
border-bottom: 0;
}
span {
background-color: transparent;
padding: 0;
}
}
.agenda-item {
.flex-row {
p {
margin: .5rem 0;
width: 100%;
}
}
}
}
}
}

View file

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

View file

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

View file

Before

Width:  |  Height:  |  Size: 596 KiB

After

Width:  |  Height:  |  Size: 596 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 286 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

View file

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

View file

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 92 KiB

View file

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

View file

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View file

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View file

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

View file

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Social_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path id="Shopify_1_" class="st0" d="M69.7,19.8c0-0.4,0-0.8,0-1.2c0-3.6-0.5-6.5-1.3-8.8c3.2,0.4,5.3,4.1,6.7,8.3
C73.5,18.6,71.7,19.2,69.7,19.8z M62.6,55.7c0,0-3.8-2-8.3-2c-6.7,0-7.1,4.3-7.1,5.3c0,5.8,15.2,8.1,15.2,21.8
c0,10.8-6.8,17.7-16,17.7c-11,0-16.6-6.9-16.6-6.9l2.9-9.8c0,0,5.8,5,10.7,5c3.2,0,4.5-2.5,4.5-4.4c0-7.6-12.4-8-12.4-20.5
c0-10.5,7.5-20.8,22.7-20.8c5.9,0,8.8,1.7,8.8,1.7L62.6,55.7z M60.1,6.4c0.6,0,1.3,0.2,1.9,0.6c-4.6,2.2-9.6,7.7-11.7,18.8
c-3.1,1-6.1,1.9-8.9,2.8C43.9,20.2,49.7,6.4,60.1,6.4z M65.9,20.3c0,0.2,0,0.4,0,0.6c-3.5,1.1-7.4,2.3-11.2,3.5
c2.2-8.4,6.2-12.4,9.7-13.9C65.3,12.8,65.9,16,65.9,20.3z M82.6,15.8c-0.2,0-0.4,0.1-0.6,0.1c-0.1,0-1.3,0.4-3.4,1
c-2-5.8-5.5-11.1-11.8-11.1c-0.2,0-0.4,0-0.5,0c-1.8-2.4-4-3.4-5.9-3.4C46,2.5,39.1,20.7,36.9,30c-5.6,1.8-9.6,3-10.1,3.2
c-3.1,1-3.2,1.1-3.7,4.1c-0.3,2.3-8.5,66.2-8.5,66.2l64.1,12.1l0.1,0L82.6,15.8z M87.2,19c1.9,1.8,3.9,3.9,3.9,3.9s8.6,0.6,9,0.7
c0.4,0,0.9,0.3,1,0.9c0.1,0.6,12.3,83.4,12.3,83.4l-29.9,6.5L87.2,19z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 884 KiB

After

Width:  |  Height:  |  Size: 804 KiB

View file

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

View file

@ -1 +0,0 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="46.53" height="49.15" viewBox="0 0 46.53 49.15"><title>aug3-icon</title><rect x="8.69" y="10" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(54.51 58.45) rotate(180)" fill="#231f20" stroke="#231f20" stroke-miterlimit="10" stroke-width="1.4" opacity="0.1"/><rect x="8.69" y="7.37" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(54.51 53.2) rotate(180)" fill="#fff" stroke="#22a0d1" stroke-miterlimit="10" stroke-width="1.4"/><path d="M8.69,7.37H53.81a0,0,0,0,1,0,0v8.36A6.77,6.77,0,0,1,47,22.5H15.46a6.77,6.77,0,0,1-6.77-6.77V7.37a0,0,0,0,1,0,0Z" transform="translate(54.51 23.2) rotate(180)" fill="#25aff4" stroke="#22a0d1" stroke-miterlimit="10" stroke-width="1.4"/><path d="M31.23,34.79a3.49,3.49,0,0,0,1.1-.26,2.11,2.11,0,0,0,.84-0.62,1.69,1.69,0,0,0,.33-1.09,1.89,1.89,0,0,0-.68-1.57,2.44,2.44,0,0,0-1.57-.55,2.2,2.2,0,0,0-1.85.81,3.12,3.12,0,0,0-.6,2H25.72a6.75,6.75,0,0,1,.44-2.24,5.11,5.11,0,0,1,1.11-1.74A5,5,0,0,1,29,28.44a6,6,0,0,1,2.23-.4,6.67,6.67,0,0,1,1.91.28,5.46,5.46,0,0,1,1.72.85,4.61,4.61,0,0,1,1.24,1.39,3.68,3.68,0,0,1,.48,1.89,3.77,3.77,0,0,1-.56,2,2.8,2.8,0,0,1-1.67,1.21v0A3.47,3.47,0,0,1,36.41,37a3.74,3.74,0,0,1,.75,2.34,4.92,4.92,0,0,1-.49,2.23,4.86,4.86,0,0,1-1.31,1.64,5.76,5.76,0,0,1-1.89,1,7.68,7.68,0,0,1-4.67,0,5.12,5.12,0,0,1-1.88-1.13,5,5,0,0,1-1.19-1.81,6.35,6.35,0,0,1-.4-2.46h3.07a4.58,4.58,0,0,0,.2,1.22,3,3,0,0,0,.52,1,2.48,2.48,0,0,0,.85.67,2.74,2.74,0,0,0,1.22.25A2.66,2.66,0,0,0,33,41.26a2.72,2.72,0,0,0,.4-3.22,2,2,0,0,0-.9-0.69,3.75,3.75,0,0,0-1.19-.25q-0.65,0-1.24,0V34.79A6.84,6.84,0,0,0,31.23,34.79Z" transform="translate(-7.99 -6.67)" fill="#6b6b6b"/><path d="M23.58,11.31l2.67,7.14H24.62l-0.54-1.59H21.41l-0.56,1.59H19.27L22,11.31h1.61Zm0.09,4.38-0.9-2.62h0l-0.93,2.62h1.85Z" transform="translate(-7.99 -6.67)" fill="#fff"/><path d="M33.12,17.9a3.3,3.3,0,0,1-2.24.71,3.29,3.29,0,0,1-2.25-.7,2.73,2.73,0,0,1-.79-2.16V11.31h1.57v4.44a3.16,3.16,0,0,0,0,.57,1.11,1.11,0,0,0,.65.84,1.81,1.81,0,0,0,.77.13A1.47,1.47,0,0,0,32,16.92a1.79,1.79,0,0,0,.32-1.17V11.31h1.57v4.44A2.71,2.71,0,0,1,33.12,17.9Z" transform="translate(-7.99 -6.67)" fill="#fff"/><path d="M40.5,18.39a2.64,2.64,0,0,1-1,.21A3.65,3.65,0,0,1,38,18.32a3.17,3.17,0,0,1-1.11-.79,3.47,3.47,0,0,1-.69-1.17A4.31,4.31,0,0,1,36,14.91a4.46,4.46,0,0,1,.24-1.49,3.57,3.57,0,0,1,.69-1.19,3.17,3.17,0,0,1,1.11-.8,3.61,3.61,0,0,1,1.47-.29,3.46,3.46,0,0,1,1.07.17,3,3,0,0,1,.93.48,2.62,2.62,0,0,1,1,1.87H41a1.51,1.51,0,0,0-.54-0.9,1.58,1.58,0,0,0-1-.3,1.83,1.83,0,0,0-.9.21,1.7,1.7,0,0,0-.6.55,2.43,2.43,0,0,0-.33.79,4,4,0,0,0-.1.91,3.67,3.67,0,0,0,.1.88,2.37,2.37,0,0,0,.33.76,1.7,1.7,0,0,0,.6.54,1.83,1.83,0,0,0,.9.21,1.7,1.7,0,0,0,1.21-.39,1.72,1.72,0,0,0,.5-1.15H39.59V14.59h3v3.86h-1l-0.16-.81A2.36,2.36,0,0,1,40.5,18.39Z" transform="translate(-7.99 -6.67)" fill="#fff"/></svg>

Before

Width:  |  Height:  |  Size: 2.8 KiB

View file

@ -1 +0,0 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="46.53" height="49.15" viewBox="0 0 46.53 49.15"><defs><style>.cls-1{fill:#231f20;stroke:#231f20;opacity:0.1;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;stroke-width:1.4px;}.cls-2,.cls-5{fill:#fff;}.cls-2,.cls-3{stroke:#22a0d1;}.cls-3{fill:#25aff4;}.cls-4{fill:#6b6b6b;}</style></defs><title>aug4-icon</title><rect class="cls-1" x="3.94" y="5.25" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(49.76 53.7) rotate(180)"/><rect class="cls-2" x="3.94" y="2.62" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(49.76 48.45) rotate(180)"/><path class="cls-3" d="M3.94,2.62H49.06a0,0,0,0,1,0,0V11a6.77,6.77,0,0,1-6.77,6.77H10.71A6.77,6.77,0,0,1,3.94,11V2.62a0,0,0,0,1,0,0Z" transform="translate(49.76 18.45) rotate(180)"/><path class="cls-4" d="M20.54,35.84v-3l6.91-9.28h2.89v9.57h2.11v2.66H30.34v3.68H27.27V35.84H20.54Zm6.66-8.19-4.12,5.53h4.18V27.65H27.21Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M18.83,6.56L21.5,13.7H19.87l-0.54-1.59H16.66L16.09,13.7H14.52l2.7-7.14h1.61Zm0.09,4.38L18,8.32h0l-0.93,2.62h1.85Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M28.37,13.15a3.3,3.3,0,0,1-2.24.71,3.29,3.29,0,0,1-2.25-.7A2.73,2.73,0,0,1,23.08,11V6.56h1.57V11a3.16,3.16,0,0,0,0,.57,1.11,1.11,0,0,0,.65.84,1.81,1.81,0,0,0,.77.13,1.47,1.47,0,0,0,1.16-.37A1.79,1.79,0,0,0,27.6,11V6.56h1.57V11A2.71,2.71,0,0,1,28.37,13.15Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M35.75,13.64a2.64,2.64,0,0,1-1,.21,3.65,3.65,0,0,1-1.47-.29,3.17,3.17,0,0,1-1.11-.79,3.47,3.47,0,0,1-.69-1.17,4.31,4.31,0,0,1-.24-1.46,4.46,4.46,0,0,1,.24-1.49,3.57,3.57,0,0,1,.69-1.19,3.17,3.17,0,0,1,1.11-.8,3.61,3.61,0,0,1,1.47-.29,3.46,3.46,0,0,1,1.07.17,3,3,0,0,1,.93.48,2.62,2.62,0,0,1,1,1.87h-1.5A1.51,1.51,0,0,0,35.7,8a1.58,1.58,0,0,0-1-.3,1.83,1.83,0,0,0-.9.21,1.7,1.7,0,0,0-.6.55,2.43,2.43,0,0,0-.33.79,4,4,0,0,0-.1.91,3.67,3.67,0,0,0,.1.88,2.37,2.37,0,0,0,.33.76,1.7,1.7,0,0,0,.6.54,1.83,1.83,0,0,0,.9.21,1.7,1.7,0,0,0,1.21-.39,1.72,1.72,0,0,0,.5-1.15H34.84V9.84h3V13.7h-1l-0.16-.81A2.36,2.36,0,0,1,35.75,13.64Z" transform="translate(-3.24 -1.92)"/></svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

View file

@ -1 +0,0 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="46.53" height="49.15" viewBox="0 0 46.53 49.15"><defs><style>.cls-1{fill:#231f20;stroke:#231f20;opacity:0.1;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;stroke-width:1.4px;}.cls-2,.cls-5{fill:#fff;}.cls-2,.cls-3{stroke:#22a0d1;}.cls-3{fill:#25aff4;}.cls-4{fill:#6b6b6b;}</style></defs><title>aug5-icon</title><rect class="cls-1" x="3.94" y="5.25" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(49.76 53.7) rotate(180)"/><rect class="cls-2" x="3.94" y="2.62" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(49.76 48.45) rotate(180)"/><path class="cls-3" d="M3.94,2.62H49.06a0,0,0,0,1,0,0V11a6.77,6.77,0,0,1-6.77,6.77H10.71A6.77,6.77,0,0,1,3.94,11V2.62a0,0,0,0,1,0,0Z" transform="translate(49.76 18.45) rotate(180)"/><path class="cls-4" d="M25,26.27l-0.64,3.62,0,0A4,4,0,0,1,25.79,29a5.27,5.27,0,0,1,3.8.15,4.6,4.6,0,0,1,1.54,1.16,5.05,5.05,0,0,1,1,1.72,6.62,6.62,0,0,1,.33,2.1,5.49,5.49,0,0,1-.48,2.29,5.83,5.83,0,0,1-1.28,1.83,5.7,5.7,0,0,1-1.88,1.19,5.86,5.86,0,0,1-2.27.4,7.9,7.9,0,0,1-2.22-.31,5.52,5.52,0,0,1-1.88-.94A4.73,4.73,0,0,1,21.1,37a4.89,4.89,0,0,1-.51-2.19h3.23a2.64,2.64,0,0,0,.82,1.74,2.55,2.55,0,0,0,1.8.65,2.49,2.49,0,0,0,1.15-.26,2.72,2.72,0,0,0,.86-0.68,3.06,3.06,0,0,0,.55-1,3.48,3.48,0,0,0,.19-1.15A3.64,3.64,0,0,0,29,33a2.72,2.72,0,0,0-.55-1,2.56,2.56,0,0,0-.86-0.64,2.78,2.78,0,0,0-1.16-.23,2.86,2.86,0,0,0-1.41.31,3.3,3.3,0,0,0-1,1H21.09l1.57-8.8h8.89v2.66H25Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M18.83,6.56L21.5,13.7H19.87l-0.54-1.59H16.66L16.09,13.7H14.52l2.7-7.14h1.61Zm0.09,4.38L18,8.32h0l-0.93,2.62h1.85Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M28.37,13.15a3.3,3.3,0,0,1-2.24.71,3.29,3.29,0,0,1-2.25-.7A2.73,2.73,0,0,1,23.08,11V6.56h1.57V11a3.16,3.16,0,0,0,0,.57,1.11,1.11,0,0,0,.65.84,1.81,1.81,0,0,0,.77.13,1.47,1.47,0,0,0,1.16-.37A1.79,1.79,0,0,0,27.6,11V6.56h1.57V11A2.71,2.71,0,0,1,28.37,13.15Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M35.75,13.64a2.64,2.64,0,0,1-1,.21,3.65,3.65,0,0,1-1.47-.29,3.17,3.17,0,0,1-1.11-.79,3.47,3.47,0,0,1-.69-1.17,4.31,4.31,0,0,1-.24-1.46,4.46,4.46,0,0,1,.24-1.49,3.57,3.57,0,0,1,.69-1.19,3.17,3.17,0,0,1,1.11-.8,3.61,3.61,0,0,1,1.47-.29,3.46,3.46,0,0,1,1.07.17,3,3,0,0,1,.93.48,2.62,2.62,0,0,1,1,1.87h-1.5A1.51,1.51,0,0,0,35.7,8a1.58,1.58,0,0,0-1-.3,1.83,1.83,0,0,0-.9.21,1.7,1.7,0,0,0-.6.55,2.43,2.43,0,0,0-.33.79,4,4,0,0,0-.1.91,3.67,3.67,0,0,0,.1.88,2.37,2.37,0,0,0,.33.76,1.7,1.7,0,0,0,.6.54,1.83,1.83,0,0,0,.9.21,1.7,1.7,0,0,0,1.21-.39,1.72,1.72,0,0,0,.5-1.15H34.84V9.84h3V13.7h-1l-0.16-.81A2.36,2.36,0,0,1,35.75,13.64Z" transform="translate(-3.24 -1.92)"/></svg>

Before

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -1 +0,0 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="46.53" height="49.15" viewBox="0 0 46.53 49.15"><defs><style>.cls-1{fill:#231f20;stroke:#231f20;opacity:0.1;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;stroke-width:1.4px;}.cls-2,.cls-5{fill:#fff;}.cls-2,.cls-3{stroke:#22a0d1;}.cls-3{fill:#25aff4;}.cls-4{fill:#6b6b6b;}</style></defs><title>aug6-icon</title><rect class="cls-1" x="3.94" y="5.25" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(49.76 53.7) rotate(180)"/><rect class="cls-2" x="3.94" y="2.62" width="45.13" height="45.13" rx="6.77" ry="6.77" transform="translate(49.76 48.45) rotate(180)"/><path class="cls-3" d="M3.94,2.62H49.06a0,0,0,0,1,0,0V11a6.77,6.77,0,0,1-6.77,6.77H10.71A6.77,6.77,0,0,1,3.94,11V2.62a0,0,0,0,1,0,0Z" transform="translate(49.76 18.45) rotate(180)"/><path class="cls-4" d="M28.27,26.31a1.88,1.88,0,0,0-1.41-.59,2.1,2.1,0,0,0-1.44.51,3.73,3.73,0,0,0-.92,1.25,6.73,6.73,0,0,0-.5,1.58,9.92,9.92,0,0,0-.18,1.5l0,0a3.85,3.85,0,0,1,1.55-1.36,4.84,4.84,0,0,1,2-.41,4.79,4.79,0,0,1,2,.44,5,5,0,0,1,1.66,1.19A4.61,4.61,0,0,1,32,32.13a6.24,6.24,0,0,1,.3,1.89,6.43,6.43,0,0,1-.4,2.29,5.46,5.46,0,0,1-1.14,1.84A5.27,5.27,0,0,1,29,39.38a5.67,5.67,0,0,1-2.27.44,5.67,5.67,0,0,1-3-.72,5.51,5.51,0,0,1-1.89-1.88,7.73,7.73,0,0,1-1-2.63,16.34,16.34,0,0,1-.27-3,13.1,13.1,0,0,1,.34-3A8.63,8.63,0,0,1,22.09,26,6.14,6.14,0,0,1,24,24a5.28,5.28,0,0,1,2.89-.75,6,6,0,0,1,1.91.3,4.92,4.92,0,0,1,1.57.85,4.41,4.41,0,0,1,1.11,1.38,5.5,5.5,0,0,1,.57,1.89H29A2.75,2.75,0,0,0,28.27,26.31Zm-2.72,5.2a2.26,2.26,0,0,0-.81.65,2.85,2.85,0,0,0-.48.94,4,4,0,0,0-.16,1.13,3.55,3.55,0,0,0,.17,1.08,3,3,0,0,0,.5,1,2.46,2.46,0,0,0,.81.67,2.31,2.31,0,0,0,1.09.25,2.07,2.07,0,0,0,1-.25,2.51,2.51,0,0,0,.76-0.66A2.86,2.86,0,0,0,29,35.34a3.64,3.64,0,0,0,.16-1.07,4.11,4.11,0,0,0-.15-1.1,3.08,3.08,0,0,0-.44-1,2.29,2.29,0,0,0-.76-0.68,2.18,2.18,0,0,0-1.08-.26A2.54,2.54,0,0,0,25.56,31.51Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M18.83,6.56L21.5,13.7H19.87l-0.54-1.59H16.66L16.09,13.7H14.52l2.7-7.14h1.61Zm0.09,4.38L18,8.32h0l-0.93,2.62h1.85Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M28.37,13.15a3.3,3.3,0,0,1-2.24.71,3.29,3.29,0,0,1-2.25-.7A2.73,2.73,0,0,1,23.08,11V6.56h1.57V11a3.16,3.16,0,0,0,0,.57,1.11,1.11,0,0,0,.65.84,1.81,1.81,0,0,0,.77.13,1.47,1.47,0,0,0,1.16-.37A1.79,1.79,0,0,0,27.6,11V6.56h1.57V11A2.71,2.71,0,0,1,28.37,13.15Z" transform="translate(-3.24 -1.92)"/><path class="cls-5" d="M35.75,13.64a2.64,2.64,0,0,1-1,.21,3.65,3.65,0,0,1-1.47-.29,3.17,3.17,0,0,1-1.11-.79,3.47,3.47,0,0,1-.69-1.17,4.31,4.31,0,0,1-.24-1.46,4.46,4.46,0,0,1,.24-1.49,3.57,3.57,0,0,1,.69-1.19,3.17,3.17,0,0,1,1.11-.8,3.61,3.61,0,0,1,1.47-.29,3.46,3.46,0,0,1,1.07.17,3,3,0,0,1,.93.48,2.62,2.62,0,0,1,1,1.87h-1.5A1.51,1.51,0,0,0,35.7,8a1.58,1.58,0,0,0-1-.3,1.83,1.83,0,0,0-.9.21,1.7,1.7,0,0,0-.6.55,2.43,2.43,0,0,0-.33.79,4,4,0,0,0-.1.91,3.67,3.67,0,0,0,.1.88,2.37,2.37,0,0,0,.33.76,1.7,1.7,0,0,0,.6.54,1.83,1.83,0,0,0,.9.21,1.7,1.7,0,0,0,1.21-.39,1.72,1.72,0,0,0,.5-1.15H34.84V9.84h3V13.7h-1l-0.16-.81A2.36,2.36,0,0,1,35.75,13.64Z" transform="translate(-3.24 -1.92)"/></svg>

Before

Width:  |  Height:  |  Size: 3.1 KiB

View file

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="46.5px" height="49.2px" viewBox="0 0 46.5 49.2" style="enable-background:new 0 0 46.5 49.2;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.1;fill:#231F20;stroke:#231F20;stroke-width:1.4;stroke-miterlimit:10;enable-background:new ;}
.st1{fill:#FFFFFF;stroke:#22A0D1;stroke-width:1.4;stroke-miterlimit:10;}
.st2{fill:#25AFF4;stroke:#22A0D1;stroke-width:1.4;stroke-miterlimit:10;}
.st3{fill:#FFFFFF;}
.st4{fill:#6B6B6B;}
</style>
<path class="st0" d="M39,48.5H7.5c-3.7,0-6.8-3-6.8-6.8V10.1c0-3.7,3-6.8,6.8-6.8H39c3.7,0,6.8,3,6.8,6.8v31.6
C45.8,45.4,42.8,48.5,39,48.5z"/>
<path class="st1" d="M39,45.8H7.5c-3.7,0-6.8-3-6.8-6.8V7.5c0-3.7,3-6.8,6.8-6.8H39c3.7,0,6.8,3,6.8,6.8v31.6
C45.8,42.8,42.8,45.8,39,45.8z"/>
<path class="st2" d="M45.8,15.8H0.7l0,0V7.5c0-3.7,3-6.8,6.8-6.8c0,0,0,0,0,0H39c3.7,0,6.8,3,6.8,6.8V15.8L45.8,15.8z"/>
<g>
<path class="st3" d="M14.3,10.3c0,0.3-0.2,0.5-0.3,0.8c-0.2,0.2-0.4,0.4-0.7,0.6c-0.3,0.2-0.7,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1
c-0.3-0.1-0.5-0.2-0.8-0.4c-0.2-0.2-0.4-0.4-0.5-0.7c-0.1-0.3-0.2-0.6-0.2-1V9.1h1.4v0.3c0,0.2,0,0.3,0,0.5c0,0.1,0.1,0.3,0.1,0.4
c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.5,0.1c0.2,0,0.4,0,0.5-0.1c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.1-0.2,0.1-0.4
c0-0.1,0-0.3,0-0.4V4.6h1.6v4.9C14.4,9.8,14.4,10,14.3,10.3z"/>
<path class="st3" d="M22,11.2c-0.5,0.5-1.3,0.7-2.2,0.7c-1,0-1.7-0.2-2.2-0.7c-0.5-0.5-0.8-1.2-0.8-2.2V4.6h1.6v4.4
c0,0.2,0,0.4,0,0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.1,0.3,0.3,0.4,0.3c0.2,0.1,0.4,0.1,0.8,0.1c0.6,0,0.9-0.1,1.2-0.4s0.3-0.6,0.3-1.2
V4.6h1.6v4.4C22.8,10,22.6,10.8,22,11.2z"/>
<path class="st3" d="M26.8,4.6v5.8h3.5v1.3h-5V4.6H26.8z"/>
<path class="st3" d="M30.2,4.6H32l1.7,2.8l1.7-2.8h1.8L34.4,9v2.7h-1.6V9L30.2,4.6z"/>
</g>
<g>
<path class="st4" d="M10.8,25.4c0.2-0.8,0.6-1.5,1.1-2.1s1.1-1.1,1.9-1.4c0.7-0.3,1.6-0.5,2.6-0.5c0.7,0,1.4,0.1,2.1,0.3
s1.3,0.6,1.8,1c0.5,0.4,0.9,1,1.2,1.6c0.3,0.6,0.4,1.3,0.4,2.1c0,0.8-0.1,1.5-0.4,2.1c-0.3,0.6-0.6,1.1-1,1.6
c-0.4,0.5-0.9,0.9-1.5,1.2c-0.5,0.4-1.1,0.7-1.6,1.1c-0.6,0.4-1.1,0.7-1.6,1.2c-0.5,0.4-1,0.9-1.4,1.4h7.6v2.8H10.1
c0-0.9,0.1-1.7,0.4-2.4c0.3-0.7,0.6-1.3,1.1-1.9s1-1,1.6-1.5s1.3-0.9,2-1.4c0.4-0.2,0.7-0.5,1.1-0.7c0.4-0.3,0.8-0.5,1.1-0.8
c0.3-0.3,0.6-0.7,0.8-1c0.2-0.4,0.3-0.8,0.3-1.3c0-0.8-0.2-1.4-0.7-1.8c-0.5-0.4-1-0.7-1.7-0.7c-0.5,0-0.9,0.1-1.2,0.3
c-0.3,0.2-0.6,0.5-0.8,0.9c-0.2,0.4-0.3,0.8-0.4,1.2c-0.1,0.4-0.1,0.9-0.1,1.3h-3.1C10.4,27.1,10.5,26.2,10.8,25.4z"/>
<path class="st4" d="M29,24.5l-0.6,3.7l0,0c0.4-0.4,0.9-0.8,1.4-1s1.1-0.3,1.7-0.3c0.8,0,1.5,0.1,2.1,0.4s1.1,0.7,1.6,1.2
c0.4,0.5,0.7,1.1,1,1.7s0.3,1.4,0.3,2.1c0,0.8-0.2,1.6-0.5,2.3s-0.8,1.3-1.3,1.9c-0.5,0.5-1.2,0.9-1.9,1.2
c-0.7,0.3-1.5,0.4-2.3,0.4c-0.8,0-1.5-0.1-2.2-0.3c-0.7-0.2-1.3-0.5-1.9-1c-0.6-0.4-1-1-1.3-1.6c-0.3-0.6-0.5-1.4-0.5-2.2h3.3
c0.1,0.7,0.4,1.3,0.8,1.8c0.5,0.4,1.1,0.7,1.8,0.7c0.4,0,0.8-0.1,1.2-0.3c0.3-0.2,0.6-0.4,0.9-0.7c0.2-0.3,0.4-0.6,0.6-1
c0.1-0.4,0.2-0.8,0.2-1.2c0-0.4-0.1-0.8-0.2-1.2c-0.1-0.4-0.3-0.7-0.6-1c-0.2-0.3-0.5-0.5-0.9-0.6c-0.3-0.2-0.7-0.2-1.2-0.2
c-0.6,0-1.1,0.1-1.4,0.3c-0.4,0.2-0.7,0.5-1,1H25l1.6-8.9h9v2.7H29z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="46.5px" height="49.2px" viewBox="0 0 46.5 49.2" style="enable-background:new 0 0 46.5 49.2;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.1;fill:#231F20;stroke:#231F20;stroke-width:1.4;stroke-miterlimit:10;enable-background:new ;}
.st1{fill:#FFFFFF;stroke:#22A0D1;stroke-width:1.4;stroke-miterlimit:10;}
.st2{fill:#25AFF4;stroke:#22A0D1;stroke-width:1.4;stroke-miterlimit:10;}
.st3{fill:#FFFFFF;}
.st4{fill:#6B6B6B;}
</style>
<path class="st0" d="M39,48.5H7.5c-3.7,0-6.8-3-6.8-6.8V10.1c0-3.7,3-6.8,6.8-6.8H39c3.7,0,6.8,3,6.8,6.8v31.6
C45.8,45.4,42.8,48.5,39,48.5z"/>
<path class="st1" d="M39,45.8H7.5c-3.7,0-6.8-3-6.8-6.8V7.5c0-3.7,3-6.8,6.8-6.8H39c3.7,0,6.8,3,6.8,6.8v31.6
C45.8,42.8,42.8,45.8,39,45.8z"/>
<path class="st2" d="M45.8,15.8H0.7l0,0V7.5c0-3.7,3-6.8,6.8-6.8c0,0,0,0,0,0H39c3.7,0,6.8,3,6.8,6.8V15.8L45.8,15.8z"/>
<g>
<path class="st3" d="M14.3,10.3c0,0.3-0.2,0.5-0.3,0.8c-0.2,0.2-0.4,0.4-0.7,0.6c-0.3,0.2-0.7,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1
c-0.3-0.1-0.5-0.2-0.8-0.4c-0.2-0.2-0.4-0.4-0.5-0.7c-0.1-0.3-0.2-0.6-0.2-1V9.1h1.4v0.3c0,0.2,0,0.3,0,0.5c0,0.1,0.1,0.3,0.1,0.4
c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.5,0.1c0.2,0,0.4,0,0.5-0.1c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.1-0.2,0.1-0.4
c0-0.1,0-0.3,0-0.4V4.6h1.6v4.9C14.4,9.8,14.4,10,14.3,10.3z"/>
<path class="st3" d="M22,11.2c-0.5,0.5-1.3,0.7-2.2,0.7c-1,0-1.7-0.2-2.2-0.7c-0.5-0.5-0.8-1.2-0.8-2.2V4.6h1.6v4.4
c0,0.2,0,0.4,0,0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.1,0.3,0.3,0.4,0.3c0.2,0.1,0.4,0.1,0.8,0.1c0.6,0,0.9-0.1,1.2-0.4s0.3-0.6,0.3-1.2
V4.6h1.6v4.4C22.8,10,22.6,10.8,22,11.2z"/>
<path class="st3" d="M26.8,4.6v5.8h3.5v1.3h-5V4.6H26.8z"/>
<path class="st3" d="M30.2,4.6H32l1.7,2.8l1.7-2.8h1.8L34.4,9v2.7h-1.6V9L30.2,4.6z"/>
</g>
<g>
<path class="st4" d="M10.8,25.4c0.2-0.8,0.6-1.5,1.1-2.1s1.1-1.1,1.9-1.4c0.7-0.3,1.6-0.5,2.6-0.5c0.7,0,1.4,0.1,2.1,0.3
s1.3,0.6,1.8,1c0.5,0.4,0.9,1,1.2,1.6c0.3,0.6,0.4,1.3,0.4,2.1c0,0.8-0.1,1.5-0.4,2.1c-0.3,0.6-0.6,1.1-1,1.6
c-0.4,0.5-0.9,0.9-1.5,1.2c-0.5,0.4-1.1,0.7-1.6,1.1c-0.6,0.4-1.1,0.7-1.6,1.2c-0.5,0.4-1,0.9-1.4,1.4h7.6v2.8H10.1
c0-0.9,0.1-1.7,0.4-2.4c0.3-0.7,0.6-1.3,1.1-1.9s1-1,1.6-1.5s1.3-0.9,2-1.4c0.4-0.2,0.7-0.5,1.1-0.7c0.4-0.3,0.8-0.5,1.1-0.8
c0.3-0.3,0.6-0.7,0.8-1c0.2-0.4,0.3-0.8,0.3-1.3c0-0.8-0.2-1.4-0.7-1.8c-0.5-0.4-1-0.7-1.7-0.7c-0.5,0-0.9,0.1-1.2,0.3
c-0.3,0.2-0.6,0.5-0.8,0.9c-0.2,0.4-0.3,0.8-0.4,1.2c-0.1,0.4-0.1,0.9-0.1,1.3h-3.1C10.4,27.1,10.5,26.2,10.8,25.4z"/>
<path class="st4" d="M32.3,24.5c-0.4-0.4-0.9-0.6-1.4-0.6c-0.6,0-1.1,0.2-1.5,0.5c-0.4,0.3-0.7,0.8-0.9,1.3c-0.2,0.5-0.4,1-0.5,1.6
c-0.1,0.6-0.2,1.1-0.2,1.5l0,0c0.4-0.6,1-1.1,1.6-1.4c0.6-0.3,1.3-0.4,2.1-0.4c0.7,0,1.4,0.1,2,0.4s1.2,0.7,1.7,1.2
c0.4,0.5,0.7,1,0.9,1.7s0.3,1.3,0.3,1.9c0,0.8-0.1,1.6-0.4,2.3c-0.3,0.7-0.7,1.3-1.2,1.9c-0.5,0.5-1.1,0.9-1.8,1.2
s-1.5,0.4-2.3,0.4c-1.2,0-2.2-0.2-3-0.7c-0.8-0.5-1.4-1.1-1.9-1.9c-0.5-0.8-0.8-1.7-1-2.7c-0.2-1-0.3-2-0.3-3c0-1,0.1-2,0.3-3
c0.2-1,0.6-1.9,1.1-2.7c0.5-0.8,1.2-1.5,2-2c0.8-0.5,1.8-0.8,2.9-0.8c0.7,0,1.3,0.1,1.9,0.3c0.6,0.2,1.1,0.5,1.6,0.9
c0.5,0.4,0.8,0.8,1.1,1.4c0.3,0.6,0.5,1.2,0.6,1.9h-3.1C32.9,25.4,32.7,24.9,32.3,24.5z M29.6,29.8c-0.3,0.2-0.6,0.4-0.8,0.7
c-0.2,0.3-0.4,0.6-0.5,1s-0.2,0.7-0.2,1.1c0,0.4,0.1,0.7,0.2,1.1c0.1,0.4,0.3,0.7,0.5,1c0.2,0.3,0.5,0.5,0.8,0.7
c0.3,0.2,0.7,0.3,1.1,0.3c0.4,0,0.7-0.1,1-0.3c0.3-0.2,0.6-0.4,0.8-0.7c0.2-0.3,0.4-0.6,0.5-0.9c0.1-0.4,0.2-0.7,0.2-1.1
c0-0.4,0-0.8-0.1-1.1c-0.1-0.4-0.2-0.7-0.4-1c-0.2-0.3-0.5-0.5-0.8-0.7c-0.3-0.2-0.7-0.3-1.1-0.3C30.3,29.6,29.9,29.6,29.6,29.8z"
/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

View file

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="46.5px" height="49.2px" viewBox="0 0 46.5 49.2" style="enable-background:new 0 0 46.5 49.2;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.1;fill:#231F20;stroke:#231F20;stroke-width:1.4;stroke-miterlimit:10;enable-background:new ;}
.st1{fill:#FFFFFF;stroke:#22A0D1;stroke-width:1.4;stroke-miterlimit:10;}
.st2{fill:#25AFF4;stroke:#22A0D1;stroke-width:1.4;stroke-miterlimit:10;}
.st3{fill:#FFFFFF;}
.st4{fill:#6B6B6B;}
</style>
<path class="st0" d="M39,48.5H7.5c-3.7,0-6.8-3-6.8-6.8V10.1c0-3.7,3-6.8,6.8-6.8H39c3.7,0,6.8,3,6.8,6.8v31.6
C45.8,45.4,42.8,48.5,39,48.5z"/>
<path class="st1" d="M39,45.8H7.5c-3.7,0-6.8-3-6.8-6.8V7.5c0-3.7,3-6.8,6.8-6.8H39c3.7,0,6.8,3,6.8,6.8v31.6
C45.8,42.8,42.8,45.8,39,45.8z"/>
<path class="st2" d="M45.8,15.8H0.7l0,0V7.5c0-3.7,3-6.8,6.8-6.8c0,0,0,0,0,0H39c3.7,0,6.8,3,6.8,6.8V15.8L45.8,15.8z"/>
<g>
<path class="st3" d="M14.3,10.3c0,0.3-0.2,0.5-0.3,0.8c-0.2,0.2-0.4,0.4-0.7,0.6c-0.3,0.2-0.7,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1
c-0.3-0.1-0.5-0.2-0.8-0.4c-0.2-0.2-0.4-0.4-0.5-0.7c-0.1-0.3-0.2-0.6-0.2-1V9.1h1.4v0.3c0,0.2,0,0.3,0,0.5c0,0.1,0.1,0.3,0.1,0.4
c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.5,0.1c0.2,0,0.4,0,0.5-0.1c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.1-0.2,0.1-0.4
c0-0.1,0-0.3,0-0.4V4.6h1.6v4.9C14.4,9.8,14.4,10,14.3,10.3z"/>
<path class="st3" d="M22,11.2c-0.5,0.5-1.3,0.7-2.2,0.7c-1,0-1.7-0.2-2.2-0.7c-0.5-0.5-0.8-1.2-0.8-2.2V4.6h1.6v4.4
c0,0.2,0,0.4,0,0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.1,0.3,0.3,0.4,0.3c0.2,0.1,0.4,0.1,0.8,0.1c0.6,0,0.9-0.1,1.2-0.4s0.3-0.6,0.3-1.2
V4.6h1.6v4.4C22.8,10,22.6,10.8,22,11.2z"/>
<path class="st3" d="M26.8,4.6v5.8h3.5v1.3h-5V4.6H26.8z"/>
<path class="st3" d="M30.2,4.6H32l1.7,2.8l1.7-2.8h1.8L34.4,9v2.7h-1.6V9L30.2,4.6z"/>
</g>
<g>
<path class="st4" d="M10.8,25.4c0.2-0.8,0.6-1.5,1.1-2.1s1.1-1.1,1.9-1.4c0.7-0.3,1.6-0.5,2.6-0.5c0.7,0,1.4,0.1,2.1,0.3
s1.3,0.6,1.8,1c0.5,0.4,0.9,1,1.2,1.6c0.3,0.6,0.4,1.3,0.4,2.1c0,0.8-0.1,1.5-0.4,2.1c-0.3,0.6-0.6,1.1-1,1.6
c-0.4,0.5-0.9,0.9-1.5,1.2c-0.5,0.4-1.1,0.7-1.6,1.1c-0.6,0.4-1.1,0.7-1.6,1.2c-0.5,0.4-1,0.9-1.4,1.4h7.6v2.8H10.1
c0-0.9,0.1-1.7,0.4-2.4c0.3-0.7,0.6-1.3,1.1-1.9s1-1,1.6-1.5s1.3-0.9,2-1.4c0.4-0.2,0.7-0.5,1.1-0.7c0.4-0.3,0.8-0.5,1.1-0.8
c0.3-0.3,0.6-0.7,0.8-1c0.2-0.4,0.3-0.8,0.3-1.3c0-0.8-0.2-1.4-0.7-1.8c-0.5-0.4-1-0.7-1.7-0.7c-0.5,0-0.9,0.1-1.2,0.3
c-0.3,0.2-0.6,0.5-0.8,0.9c-0.2,0.4-0.3,0.8-0.4,1.2c-0.1,0.4-0.1,0.9-0.1,1.3h-3.1C10.4,27.1,10.5,26.2,10.8,25.4z"/>
<path class="st4" d="M33.8,27.3c-0.7,1.1-1.2,2.2-1.6,3.4c-0.4,1.2-0.8,2.4-1,3.7c-0.2,1.2-0.4,2.4-0.4,3.5h-3.5
c0.2-2.4,0.7-4.7,1.7-6.9c0.9-2.2,2.2-4.3,3.7-6.1H25v-3h11v2.8C35.2,25.3,34.4,26.2,33.8,27.3z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View file

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="46.5px" height="49.2px" viewBox="0 0 46.5 49.2" style="enable-background:new 0 0 46.5 49.2;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.1;fill:#231F20;stroke:#231F20;stroke-width:1.4;stroke-miterlimit:10;enable-background:new ;}
.st1{fill:#FFFFFF;stroke:#22A0D1;stroke-width:1.4;stroke-miterlimit:10;}
.st2{fill:#25AFF4;stroke:#22A0D1;stroke-width:1.4;stroke-miterlimit:10;}
.st3{fill:#FFFFFF;}
.st4{fill:#6B6B6B;}
</style>
<path class="st0" d="M39,48.5H7.5c-3.7,0-6.8-3-6.8-6.8V10.1c0-3.7,3-6.8,6.8-6.8H39c3.7,0,6.8,3,6.8,6.8v31.6
C45.8,45.4,42.8,48.5,39,48.5z"/>
<path class="st1" d="M39,45.8H7.5c-3.7,0-6.8-3-6.8-6.8V7.5c0-3.7,3-6.8,6.8-6.8H39c3.7,0,6.8,3,6.8,6.8v31.6
C45.8,42.8,42.8,45.8,39,45.8z"/>
<path class="st2" d="M45.8,15.8H0.7l0,0V7.5c0-3.7,3-6.8,6.8-6.8c0,0,0,0,0,0H39c3.7,0,6.8,3,6.8,6.8V15.8L45.8,15.8z"/>
<g>
<path class="st3" d="M14.3,10.3c0,0.3-0.2,0.5-0.3,0.8c-0.2,0.2-0.4,0.4-0.7,0.6c-0.3,0.2-0.7,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1
c-0.3-0.1-0.5-0.2-0.8-0.4c-0.2-0.2-0.4-0.4-0.5-0.7c-0.1-0.3-0.2-0.6-0.2-1V9.1h1.4v0.3c0,0.2,0,0.3,0,0.5c0,0.1,0.1,0.3,0.1,0.4
c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.5,0.1c0.2,0,0.4,0,0.5-0.1c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.1-0.2,0.1-0.4
c0-0.1,0-0.3,0-0.4V4.6h1.6v4.9C14.4,9.8,14.4,10,14.3,10.3z"/>
<path class="st3" d="M22,11.2c-0.5,0.5-1.3,0.7-2.2,0.7c-1,0-1.7-0.2-2.2-0.7c-0.5-0.5-0.8-1.2-0.8-2.2V4.6h1.6v4.4
c0,0.2,0,0.4,0,0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.1,0.3,0.3,0.4,0.3c0.2,0.1,0.4,0.1,0.8,0.1c0.6,0,0.9-0.1,1.2-0.4s0.3-0.6,0.3-1.2
V4.6h1.6v4.4C22.8,10,22.6,10.8,22,11.2z"/>
<path class="st3" d="M26.8,4.6v5.8h3.5v1.3h-5V4.6H26.8z"/>
<path class="st3" d="M30.2,4.6H32l1.7,2.8l1.7-2.8h1.8L34.4,9v2.7h-1.6V9L30.2,4.6z"/>
</g>
<g>
<path class="st4" d="M10.8,25.4c0.2-0.8,0.6-1.5,1.1-2.1s1.1-1.1,1.9-1.4c0.7-0.3,1.6-0.5,2.6-0.5c0.7,0,1.4,0.1,2.1,0.3
s1.3,0.6,1.8,1c0.5,0.4,0.9,1,1.2,1.6c0.3,0.6,0.4,1.3,0.4,2.1c0,0.8-0.1,1.5-0.4,2.1c-0.3,0.6-0.6,1.1-1,1.6
c-0.4,0.5-0.9,0.9-1.5,1.2c-0.5,0.4-1.1,0.7-1.6,1.1c-0.6,0.4-1.1,0.7-1.6,1.2c-0.5,0.4-1,0.9-1.4,1.4h7.6v2.8H10.1
c0-0.9,0.1-1.7,0.4-2.4c0.3-0.7,0.6-1.3,1.1-1.9s1-1,1.6-1.5s1.3-0.9,2-1.4c0.4-0.2,0.7-0.5,1.1-0.7c0.4-0.3,0.8-0.5,1.1-0.8
c0.3-0.3,0.6-0.7,0.8-1c0.2-0.4,0.3-0.8,0.3-1.3c0-0.8-0.2-1.4-0.7-1.8c-0.5-0.4-1-0.7-1.7-0.7c-0.5,0-0.9,0.1-1.2,0.3
c-0.3,0.2-0.6,0.5-0.8,0.9c-0.2,0.4-0.3,0.8-0.4,1.2c-0.1,0.4-0.1,0.9-0.1,1.3h-3.1C10.4,27.1,10.5,26.2,10.8,25.4z"/>
<path class="st4" d="M25.6,24c0.3-0.6,0.7-1,1.3-1.4c0.5-0.4,1.1-0.6,1.7-0.8c0.6-0.2,1.3-0.3,2-0.3c1,0,1.8,0.2,2.5,0.5
c0.7,0.3,1.2,0.7,1.7,1.1s0.7,0.9,0.9,1.4c0.2,0.5,0.3,0.9,0.3,1.3c0,0.8-0.2,1.5-0.6,2.1c-0.4,0.6-1,1-1.8,1.3v0
c1,0.2,1.7,0.7,2.2,1.4c0.5,0.7,0.8,1.6,0.8,2.6c0,0.9-0.2,1.6-0.5,2.2s-0.8,1.2-1.4,1.6c-0.6,0.4-1.2,0.7-1.9,0.9
c-0.7,0.2-1.5,0.3-2.2,0.3c-0.8,0-1.5-0.1-2.3-0.3c-0.7-0.2-1.4-0.5-2-0.9c-0.6-0.4-1-0.9-1.4-1.6c-0.3-0.6-0.5-1.4-0.5-2.3
c0-1,0.3-1.9,0.8-2.6c0.5-0.7,1.3-1.1,2.2-1.4v0c-0.8-0.2-1.4-0.6-1.8-1.2c-0.4-0.6-0.6-1.3-0.6-2.1C25.1,25.2,25.3,24.5,25.6,24z
M27.9,34.2c0.2,0.3,0.4,0.6,0.6,0.9c0.3,0.2,0.6,0.4,0.9,0.6c0.4,0.1,0.7,0.2,1.1,0.2c0.4,0,0.8-0.1,1.1-0.2
c0.3-0.1,0.6-0.3,0.9-0.6c0.3-0.2,0.4-0.5,0.6-0.9c0.1-0.3,0.2-0.7,0.2-1.1c0-0.4-0.1-0.7-0.2-1c-0.1-0.3-0.3-0.6-0.6-0.8
c-0.3-0.2-0.5-0.4-0.9-0.5c-0.3-0.1-0.7-0.2-1.1-0.2c-0.8,0-1.5,0.2-2,0.7c-0.6,0.4-0.8,1.1-0.8,1.9C27.7,33.4,27.8,33.8,27.9,34.2
z M28.8,27.7c0.5,0.4,1.1,0.5,1.7,0.5c0.7,0,1.3-0.2,1.7-0.5s0.7-0.9,0.7-1.6c0-0.2,0-0.4-0.1-0.7c-0.1-0.3-0.2-0.5-0.4-0.7
c-0.2-0.2-0.4-0.4-0.7-0.6c-0.3-0.2-0.7-0.2-1.2-0.2c-0.3,0-0.6,0-0.9,0.1c-0.3,0.1-0.6,0.2-0.8,0.4c-0.2,0.2-0.4,0.4-0.5,0.7
c-0.1,0.3-0.2,0.6-0.2,1C28.1,26.9,28.3,27.4,28.8,27.7z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB