TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature-colorenum' into 'master'

Browse Source 
Color enums and global SASS classes for coloring

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!1
This commit is contained in:
Aarni Halinen
2019-07-04 20:22:56 +00:00
parent 4fd70a87bf d1f8408472
commit fe6bf378de
45 changed files with 432 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/scss/_globals.scss
+38 -13
View File
@@ -1,14 +1,39 @@
$dark-blue: #002d3a;
$light-blue: #bfdbd9;
$white: #fff;
$black: #000;
$grey1: #d4d0c7;
$grey2: #efece4;
$orange1: #d57a2d;
$orange2: #dd934e;
$blue: #57b2df;
$light-turquoise: #beddeb;
$green: #c0dcd9;
$sand: #fdf9d7;
$font: 'Montserrat', sans-serif;
$colors: (
// Name Color ?Hover?
dark-blue: 'dark-blue' #002d3a,
light-blue: 'light-blue' #bfdbd9,
white: 'white' #fff,
black: 'black' #000,
grey1: 'grey1' #d4d0c7,
grey2: 'grey2' #efece4,
orange1: 'orange1' #d57a2d,
orange2: 'orange2' #dd934e,
blue: 'blue' #57b2df,
light-turquoise: 'light-turquoise' #beddeb,
green: 'green' #c0dcd9,
sand: 'sand' #fdf9d7
);
@function color($label) {
$color: map-get($colors, $label);
@if $color {
@return nth($color, 2);
}
@warn 'No specified color for '#{$label}'; add your own to _colors.scss';
@return null;
}
@function hover($label) {
$color: map-get($colors, $label);
@if $color {
@return nth($color, 2);
}
@warn 'No specified hover color for '#{$label}'; add your own to _colors.scss';
@return lighten($color, 20%);
}
src/components/Accordion/Accordion.scss
+4 -3
View File
@@ -1,12 +1,13 @@
@import "../../assets/scss/globals";
.accordion {
margin: 0.2em;
padding: 0.2em;
display: flex;
flex-flow: column nowrap;
border-style: solid;
border-color: $light-turquoise;
border-color: color(light-turquoise);
border-width: 1px;
&__desc {
@@ -38,7 +39,7 @@
button {
display: flex;
flex-flow: row nowrap;
background-color: $white;
background-color: color(white);
width: 100%;
margin: 0;
padding: 0;
@@ -51,7 +52,7 @@
flex: 1;
text-align: center;
padding-left: 1em;
color: $blue;
color: color(blue);
font-size: 1.125em;
margin: auto;
}
src/components/AccordionIcon/AccordionIcon.scss
+4 -3
View File
@@ -1,9 +1,10 @@
@import "../../assets/scss/globals";
.accordion-icon {
display: flex;
background-color: $blue;
color: $white;
background-color: color(blue);
color: color(white);
align-items: center;
justify-content: center;
min-width: 40px;
@@ -14,7 +15,7 @@
font-size: 40px;
&.open {
background-color: $orange1;
background-color: color(orange1);
}
}
src/components/AdminSidebarLink/AdminSidebarLink.scss
+4 -3
View File
@@ -1,13 +1,14 @@
@import "../../assets/scss/globals";
.admin-sidebar-link {
padding: 1rem 3rem 1rem 1rem;
background-color: $blue;
background-color: color(blue);
letter-spacing: 3px;
text-transform: uppercase;
line-height: 20px;
font-weight: bold;
border-left: 4px solid $blue;
border-left: 4px solid color(blue);
white-space: nowrap;
@media screen and (max-width: 800px - 1px) {
@@ -16,7 +17,7 @@
&:hover,
&.active {
border-left: 4px solid $white;
border-left: 4px solid color(white);
}
&::after {
src/components/AsideSection/AsideSection.scss
+7 -6
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.aside-section {
display: flex;
flex: 1;
@@ -8,27 +9,27 @@
padding: 4rem;
&.dark-blue {
background-color: $dark-blue;
background-color: color(dark-blue);
h2 {
color: $light-blue;
color: color(light-blue);
}
p {
color: $white;
color: color(white);
}
}
&.light-turquoise {
background-color: $light-turquoise;
background-color: color(light-turquoise);
h2,
p {
color: $dark-blue;
color: color(dark-blue);
}
}
&.light-blue {
background-color: $light-blue;
background-color: color(light-blue);
}
}
src/components/AsideSection/AsideSection.tsx
+11 -6
View File
@@ -1,18 +1,23 @@
import * as React from "react";
import "./AsideSection.scss";
import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
export interface AsideSectionProps {
className: string;
className?: string;
}
export interface AsideSectionState {}
export interface AsideSectionState { }
class AsideSection extends React.Component<AsideSectionProps, AsideSectionState> {
class AsideSection extends React.Component<AsideSectionProps & ColorDivProps, AsideSectionState> {
render() {
const {children, className} = this.props;
const { children, className, ...props } = this.props;
const classNames = [
"aside-section",
];
if (className) classNames.push(className);
return (
<div className={`${className} aside-section`}>
<ColorDiv className={classNames.join(" ")} {...props}>
{children}
</div>
</ColorDiv>
);
}
}
src/components/Button/Button.scss
+6 -5
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.button {
-webkit-appearance: none;
border-radius: none;
@@ -14,17 +15,17 @@
}
&.hero {
background-color: $dark-blue;
color: $blue;
background-color: color(dark-blue);
color: color(blue);
font-weight: 800;
letter-spacing: 1.5px;
border: 1px solid $light-turquoise;
border: 1px solid color(light-turquoise);
}
&.filled {
justify-content: center;
background-color: $blue;
color: $white;
background-color: color(blue);
color: color(white);
font-weight: 800;
letter-spacing: 1.5px;
border: none;
src/components/Card/Card.scss
+6 -5
View File
@@ -1,8 +1,9 @@
@import "../../assets/scss/globals";
.card {
background-color: $white;
color: $dark-blue;
background-color: color(white);
color: color(dark-blue);
white-space: wrap;
margin: 1rem 1rem;
display: flex;
@@ -30,7 +31,7 @@
font-size: 1.5rem;
text-align: center;
font-weight: 300;
color: $black;
color: color(black);
}
&__image {
@@ -68,7 +69,7 @@
margin: 0 0 0.5rem;
font-weight: 200;
line-height: 22px;
color: $black;
color: color(black);
@media screen and (max-width: 1200px - 1px) {
margin: 0.5rem 0;
@@ -77,7 +78,7 @@
}
&__datetime {
color: $orange1;
color: color(orange1);
display: flex;
justify-content: center;
text-align: center;
src/components/ColorDiv/ColorDiv.scss
+66
View File
@@ -0,0 +1,66 @@
@import "../../assets/scss/globals";
.color-div {
@mixin hoverableColor($colorName) {
&__#{$colorName} {
color: color($colorName);
}
&__#{$colorName}Hoverable {
&:hover,
&:active {
color: hover($colorName);
}
}
}
@mixin backgroundColor($colorName) {
&__background_#{$colorName} {
background-color: color($colorName);
}
&__background_#{$colorName}Hoverable {
&:hover,
&:active {
background-color: hover($colorName);
}
}
}
@mixin backgroundAndHoverableColor($colorName) {
@include hoverableColor($colorName);
@include backgroundColor($colorName);
}
@include backgroundAndHoverableColor(dark-blue);
@include backgroundAndHoverableColor(light-blue);
@include backgroundAndHoverableColor(white);
@include backgroundAndHoverableColor(black);
@include backgroundAndHoverableColor(grey1);
@include backgroundAndHoverableColor(grey2);
@include backgroundAndHoverableColor(orange1);
@include backgroundAndHoverableColor(orange2);
@include backgroundAndHoverableColor(blue);
@include backgroundAndHoverableColor(light-turquoise);
@include backgroundAndHoverableColor(green);
@include backgroundAndHoverableColor(sand);
&__inherit {
color: inherit;
}
&__transparent {
color: transparent;
}
&__inheritHoverable {
&:hover,
&:active {
color: inherit;
}
}
&__background_transparent {
background-color: transparent;
}
}
src/components/ColorDiv/ColorDiv.tsx
+70
View File
@@ -0,0 +1,70 @@
import * as React from "react";
import "./ColorDiv.scss";
export enum ColorEnum {
DarkBlue,
LightBlue,
White,
Black,
Grey1,
Grey2,
Orange1,
Orange2,
Blue,
LightTurquoise,
Green,
Sand,
Transparent,
Inherit,
}
const colors = new Map<ColorEnum, string>([
[ColorEnum.DarkBlue, "dark-blue"],
[ColorEnum.LightBlue, "light-blue"],
[ColorEnum.White, "white"],
[ColorEnum.Black, "black"],
[ColorEnum.Grey1, "grey1"],
[ColorEnum.Grey2, "grey2"],
[ColorEnum.Orange1, "orange1"],
[ColorEnum.Orange2, "orange2"],
[ColorEnum.Blue, "blue"],
[ColorEnum.LightTurquoise, "light-turquoise"],
[ColorEnum.Green, "green"],
[ColorEnum.Sand, "sand"],
[ColorEnum.Transparent, "transparent"],
[ColorEnum.Inherit, "inherit"]
]);
export const getColor = (color: ColorEnum): string => `color-div__${colors.get(color)}`;
export const getBgColor = (color: ColorEnum): string => `color-div__background_${colors.get(color)}`;
export const getHoverColor = (color: ColorEnum): string => `color-div__${colors.get(color)}Hoverable`;
export const getBgHoverColor = (color: ColorEnum): string => `color-div__background_${colors.get(color)}Hoverable`;
export interface ColorDivProps extends React.HTMLAttributes<HTMLDivElement> {
textColor?: ColorEnum;
backgroundColor?: ColorEnum;
hoverColor?: ColorEnum;
backgroundHoverColor?: ColorEnum;
}
export interface ColorDivState { }
class ColorDiv extends React.Component<ColorDivProps, ColorDivState> {
render() {
const { children, className, textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props } = this.props;
const classNames = [];
if (className) classNames.push(className);
if (textColor !== undefined) classNames.push(getColor(textColor));
if (backgroundColor !== undefined) classNames.push(getBgColor(backgroundColor));
if (hoverColor !== undefined) classNames.push(getHoverColor(hoverColor));
if (backgroundHoverColor !== undefined) classNames.push(getBgHoverColor(backgroundHoverColor));
return (
<div {...props} className={classNames.join(" ")} >
{children}
</div>
);
}
}
export default ColorDiv;
src/components/ColorDiv/index.ts
+2
View File
@@ -0,0 +1,2 @@
import ColorDiv from "./ColorDiv";
export default ColorDiv;
src/components/ContactCard/ContactCard.scss
+6 -5
View File
@@ -1,8 +1,9 @@
@import "../../assets/scss/globals";
.contact-card {
background-color: $white;
color: $dark-blue;
background-color: color(white);
color: color(dark-blue);
white-space: wrap;
margin: 1rem 1rem;
display: flex;
@@ -30,7 +31,7 @@
font-size: 1.5rem;
text-align: center;
font-weight: 300;
color: $black;
color: color(black);
}
&__image {
@@ -68,7 +69,7 @@
margin: 0 0 0.5rem;
font-weight: 200;
line-height: 22px;
color: $black;
color: color(black);
@media screen and (max-width: 1200px - 1px) {
margin: 0.5rem 0;
@@ -77,7 +78,7 @@
}
&__datetime {
color: $orange1;
color: color(orange1);
display: flex;
justify-content: center;
text-align: center;
src/components/DropDownBox/DropDownBox.scss
+3 -2
View File
@@ -1,7 +1,8 @@
@import "../../assets/scss/globals";
.drop-down-box {
background-color: $white;
background-color: color(white);
margin-top: 0.8rem;
position: absolute;
left: 0;
@@ -10,7 +11,7 @@
&,
& a {
color: $dark-blue !important;
color: color(dark-blue) !important;
text-transform: uppercase;
}
}
src/components/Footer/Footer.scss
+5 -4
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.footer {
display: flex;
flex-direction: column;
@@ -9,19 +10,19 @@
}
h4 {
color: $light-blue;
color: color(light-blue);
padding: 1.5rem 0;
}
& a {
color: $white;
color: color(white);
text-decoration: underline;
padding: 0.4rem 0;
font-size: 14px;
}
& p {
color: $white;
color: color(white);
margin: 0;
padding: 0.4rem 0;
font-size: 14px;
@@ -71,7 +72,7 @@
&__copyright {
display: flex;
flex-flow: row nowrap;
background-color: $black;
background-color: color(black);
text-align: center;
justify-content: center;
font-size: 12px;
src/components/Header/Header.scss
+2 -1
View File
@@ -1,11 +1,12 @@
@import "../../assets/scss/globals";
.header {
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: 0 1rem;
background-color: $dark-blue;
background-color: color(dark-blue);
@media screen and (min-width: 600px) {
position: sticky;
src/components/HeroAsideItem/HeroAsideItem.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.hero-aside-item {
max-width: 300px;
line-height: 16px;
@@ -25,11 +26,11 @@
}
h6 {
color: $blue;
color: color(blue);
font-weight: 600;
}
h6:hover {
color: $white;
color: color(white);
}
}
src/components/HeroAsideSection/HeroAsideSection.scss
+7 -6
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.hero-aside-section {
display: flex;
flex-flow: column nowrap;
@@ -15,28 +16,28 @@
padding: 3rem 1rem 2rem;
&.dark-blue {
background-color: $dark-blue;
background-color: color(dark-blue);
h2 {
color: $light-blue;
color: color(light-blue);
}
p {
font-weight: 100;
color: $white;
color: color(white);
}
}
&.light-turquoise {
background-color: $light-turquoise;
background-color: color(light-turquoise);
h2,
p {
color: $dark-blue;
color: color(dark-blue);
}
}
&.light-blue {
background-color: $light-blue;
background-color: color(light-blue);
}
}
src/components/HeroAsideSection/HeroAsideSection.tsx
+7 -20
View File
@@ -1,33 +1,20 @@
import * as React from "react";
import "./HeroAsideSection.scss";
import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
export enum BackgroundColor {
DarkBlue,
LightTurquoise,
LightBlue,
}
export interface HeroAsideSectionProps {
backgroundColor?: BackgroundColor;
}
export interface HeroAsideSectionState {}
const colors = new Map<BackgroundColor, string>([
[BackgroundColor.DarkBlue, "dark-blue"],
[BackgroundColor.LightTurquoise, "light-turquoise"],
[BackgroundColor.LightBlue, "light-blue"],
]);
export interface HeroAsideSectionProps { }
export interface HeroAsideSectionState { }
class HeroAsideSection extends React.Component<HeroAsideSectionProps, HeroAsideSectionState> {
class HeroAsideSection extends React.Component<HeroAsideSectionProps & ColorDivProps, HeroAsideSectionState> {
render() {
const { backgroundColor } = this.props;
const bgClass = colors.get(backgroundColor);
const className = `hero-aside-section ${bgClass}`;
const className = `hero-aside-section`;
return (
<div className={className}>
<ColorDiv className={className} {...this.props}>
<div className="hero-aside-section-block">
{this.props.children}
</div>
</div>
</ColorDiv>
);
}
}
src/components/MainSection/MainSection.tsx
+11 -6
View File
@@ -1,19 +1,24 @@
import * as React from "react";
import "./MainSection.scss";
import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
export interface MainSectionProps {}
export interface MainSectionState {}
export interface MainSectionProps { }
export interface MainSectionState { }
class MainSection extends React.Component<MainSectionProps, MainSectionState> {
class MainSection extends React.Component<MainSectionProps & ColorDivProps, MainSectionState> {
constructor(props: MainSectionProps) {
super(props);
}
render() {
const {children} = this.props;
const { children, className, ...props } = this.props;
const classNames = [
"main-section",
];
if (className) classNames.push(className);
return (
<div className="main-section">
<ColorDiv className={classNames.join(" ")} {...props}>
{children}
</div>
</ColorDiv>
);
}
}
src/components/NavbarChildLink/NavbarChildLink.scss
+4 -2
View File
@@ -1,4 +1,6 @@
@import "../../assets/scss/globals";
$border-width: 2px;
.navbar-child-link {
@@ -9,14 +11,14 @@ $border-width: 2px;
font-weight: 400;
@media screen and (max-width: 1200px - 1px) {
border-bottom: 1px dotted $light-blue;
border-bottom: 1px dotted color(light-blue);
margin-left: 2rem;
padding-left: 0;
}
&:hover {
@media screen and (min-width: 1200px) {
background-color: $light-blue;
background-color: color(light-blue);
}
}
}
src/components/NavbarDropdownLink/NavbarDropdownLink.scss
+4 -2
View File
@@ -1,4 +1,6 @@
@import "../../assets/scss/globals";
$border-width: 2px;
.navbar-dropdown-link {
@@ -11,7 +13,7 @@ $border-width: 2px;
padding: 20px 0;
@media screen and (max-width: 1200px - 1px) {
border-bottom: 1px solid $light-blue;
border-bottom: 1px solid color(light-blue);
}
}
@@ -25,7 +27,7 @@ $border-width: 2px;
bottom: 5px;
left: 0;
width: 100%;
border-bottom: 4px solid $light-blue;
border-bottom: 4px solid color(light-blue);
}
}
}
src/components/Navigation/Navigation.scss
+10 -8
View File
@@ -1,12 +1,14 @@
@import "../../assets/scss/globals";
$border-width: 2px;
.navigation,
.navigation-mobile-menu {
a,
a:-webkit-any-link {
fill: $light-blue;
color: $light-blue;
fill: color(light-blue);
color: color(light-blue);
}
}
@@ -16,8 +18,8 @@ $border-width: 2px;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: $light-blue;
font-size: 14px;
color: color(light-blue);
margin-left: 5rem;
@media screen and (min-width: 600px) and (max-width: 1200px - 1px) {
@@ -41,8 +43,8 @@ $border-width: 2px;
a,
a:-webkit-any-link {
fill: $white;
color: $white;
fill: color(white);
color: color(white);
}
}
@@ -66,8 +68,8 @@ $border-width: 2px;
svg {
width: 26px;
height: 26px;
fill: $white;
color: $white;
fill: color(white);
color: color(white);
}
}
}
src/components/PageLink/PageLink.scss
+4 -3
View File
@@ -1,7 +1,8 @@
@import "../../assets/scss/globals";
.page-link {
border-left-color: $blue;
border-left-color: color(blue);
border-left-width: 0.8rem;
border-left-style: solid;
margin: 0 1rem 1rem 0;
@@ -10,7 +11,7 @@
display: flex;
margin-block-start: 0;
margin-block-end: 0;
color: $dark-blue;
color: color(dark-blue);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
@@ -21,7 +22,7 @@
}
& a {
color: $dark-blue;
color: color(dark-blue);
margin-left: 1rem;
display: flex;
}
src/components/PageSection/PageSection.scss
+2 -27
View File
@@ -1,7 +1,7 @@
@import "../../assets/scss/globals";
.page-section {
background-color: $dark-blue;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
@@ -17,31 +17,6 @@
}
}
&.dark-blue {
background-color: $dark-blue;
color: $white;
}
&.white {
background-color: $white;
color: $dark-blue;
}
&.orange {
background-color: $orange1;
color: $white;
}
&.light-turquoise {
background-color: $light-turquoise;
color: $dark-blue;
}
&.light-blue {
background-color: $light-blue;
color: $black;
}
&.center {
justify-content: center;
}
@@ -53,7 +28,7 @@
bottom: 0;
width: 98%;
left: 1%;
border-bottom: 1px solid rgba($blue, 0.4);
border-bottom: 1px solid rgba(color(blue), 0.4);
}
}
}
src/components/PageSection/PageSection.tsx
+14 -23
View File
@@ -1,43 +1,34 @@
import * as React from "react";
import "./PageSection.scss";
export enum BackgroundColor {
DarkBlue,
White,
Orange,
LightTurquoise,
LightBlue,
}
import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
export interface PageSectionProps {
backgroundColor: BackgroundColor;
center?: boolean;
bottomBorder?: boolean;
cardSection?: boolean; // does section contain a grid of cards
fullSize?: boolean;
}
export interface PageSectionState {}
export interface PageSectionState { }
const colors = new Map<BackgroundColor, string>([
[BackgroundColor.DarkBlue, "dark-blue"],
[BackgroundColor.White, "white"],
[BackgroundColor.Orange, "orange"],
[BackgroundColor.LightTurquoise, "light-turquoise"],
[BackgroundColor.LightBlue, "light-blue"],
]);
class PageSection extends React.Component<PageSectionProps, PageSectionState> {
class PageSection extends React.Component<PageSectionProps & ColorDivProps, PageSectionState> {
render() {
const { backgroundColor, children, center, bottomBorder, cardSection, fullSize } = this.props;
const { children, className, center, bottomBorder, cardSection, fullSize, ...props } = this.props;
const centerClass = center ? "center" : "";
const borderClass = bottomBorder ? "bottom-border" : "";
const cardsClass = cardSection ? "card-section" : "";
const nonPaddedClass = fullSize ? "" : "padded";
const className = `page-section ${colors.get(backgroundColor)} ${centerClass} ${borderClass} ${cardsClass} ${nonPaddedClass}`;
const classNames = [
"page-section",
centerClass,
borderClass,
cardsClass,
nonPaddedClass
];
if (className) classNames.push(className);
return (
<div className={className}>
<ColorDiv className={classNames.join(" ")} {...props}>
{children}
</div>
</ColorDiv>
);
}
}
src/components/Ribbon/Ribbon.scss
+1 -1
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.ribbon {
display: flex;
flex-flow: row nowrap;
@@ -9,7 +10,6 @@
margin: auto;
p {
color: $white;
font-size: 2rem;
font-weight: 100;
line-height: 30px;
src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.signup-questions-widget {
button.add-link {
background: none;
@@ -8,7 +9,7 @@
}
button.remove {
background-color: $orange1;
background-color: color(orange1);
margin-left: auto;
margin-bottom: 0.5rem;
padding: 0.3rem 0.5rem;
@@ -20,6 +21,6 @@
display: flex;
flex-flow: column nowrap;
padding: 0.5rem;
background-color: $light-blue;
background-color: color(light-blue);
}
}
src/components/SponsorReel/SponsorReel.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.sponsor-reel {
text-align: center;
@@ -7,7 +8,7 @@
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
color: $dark-blue;
color: color(dark-blue);
margin: 1rem 0 4rem;
font-size: 14px;
@@ -17,7 +18,7 @@
}
a {
color: $blue;
color: color(blue);
text-decoration: underline;
}
src/components/SponsorReel/SponsorReel.tsx
+5 -3
View File
@@ -1,9 +1,11 @@
import * as React from "react";
import { Link } from "react-router-dom";
import "./SponsorReel.scss";
import TextAnchor from "../TextAnchor";
import { ColorEnum } from "../ColorDiv/ColorDiv";
export interface SponsorReelProps {}
export interface SponsorReelState {}
export interface SponsorReelProps { }
export interface SponsorReelState { }
class SponsorReel extends React.Component<SponsorReelProps, SponsorReelState> {
render() {
@@ -17,7 +19,7 @@ class SponsorReel extends React.Component<SponsorReelProps, SponsorReelState> {
<Link to="#"><img src="https://placehold.it/200x200" /></Link>
<Link to="#"><img src="https://placehold.it/200x200" /></Link>
</div>
<Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>
<TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.LightTurquoise} to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</TextAnchor>
</div>
);
}
src/components/TextAnchor/TextAnchor.scss
-5
View File
@@ -3,11 +3,6 @@
.text-anchor {
text-decoration: underline;
font-weight: 600;
color: inherit;
&:hover {
color: $blue;
}
&.no-weight {
font-weight: 100;
src/components/TextAnchor/TextAnchor.tsx
+15 -8
View File
@@ -1,6 +1,8 @@
import * as React from "react";
import "./TextAnchor.scss";
import { Link } from "react-router-dom";
import { ColorEnum, getColor, getHoverColor } from "../ColorDiv/ColorDiv";
export enum TextSize {
Small,
@@ -20,19 +22,24 @@ export interface TextAnchorProps {
size?: TextSize;
to: string;
style?: any;
textColor?: ColorEnum;
hoverColor?: ColorEnum;
}
export interface TextAnchorState {}
export interface TextAnchorState { }
class TextAnchor extends React.Component<TextAnchorProps, TextAnchorState> {
render() {
const { children, size, to, style } = this.props;
const className = `text-anchor ${sizes.get(size ? size : TextSize.Small)}`;
const { children, size, to, style, textColor, hoverColor } = this.props;
const classColor = textColor !== undefined ? getColor(textColor) : getColor(ColorEnum.DarkBlue);
const classHoverColor = hoverColor !== undefined ? getHoverColor(hoverColor) : getHoverColor(ColorEnum.Blue);
const classSize = size !== undefined ? sizes.get(size) : sizes.get(TextSize.Small);
const className = `text-anchor ${classSize} ${classColor} ${classHoverColor}`;
if (to.startsWith("/")) {
return (
<Link style={style} to={to} className={className}>
{children}
</Link>
);
return (
<Link style={style} to={to} className={className}>
{children}
</Link>
);
} else {
return (
<a style={style} href={to} className={className}>
src/index.scss
+6 -150
View File
@@ -1,15 +1,17 @@
@import "./assets/scss/normalize";
@import "./assets/scss/globals";
* { box-sizing: border-box; }
* {
box-sizing: border-box;
}
html,
body {
font-size: 16px;
background-color: $dark-blue;
background-color: color(dark-blue);
height: 100%;
font-family: $font;
color: $white;
color: color(white);
overflow: auto;
}
@@ -110,151 +112,5 @@ p {
a,
a:hover {
text-decoration: none;
color: $white;
}
.page {
&__dark-blue {
background-color: $dark-blue;
h1 {
color: $white;
}
h2 {
color: $light-turquoise;
}
h3 {
color: $blue;
}
p {
color: $white;
}
a {
color: $white;
}
}
&__white {
background-color: $white;
h1 {
color: $black;
}
h2 {
color: $black;
}
h3 {
color: $orange1;
}
p {
color: $black;
}
a {
color: $blue;
}
}
&__orange {
background-color: $orange1;
h1 {
color: $white;
}
h2 {
color: $white;
}
h3 {
color: $white;
}
p {
color: $white;
}
a {
color: $white;
}
}
&__light-turquoise {
background-color: $light-turquoise;
h1 {
color: $dark-blue;
}
h2 {
color: $dark-blue;
}
h3 {
color: $dark-blue;
}
p {
color: $dark-blue;
}
a {
color: $dark-blue;
}
}
&__blue {
background-color: $blue;
h1 {
color: $dark-blue;
}
h2 {
color: $dark-blue;
}
h3 {
color: $dark-blue;
}
p {
color: $white;
}
a {
color: $white;
}
}
&__light-blue {
background-color: $light-blue;
h1 {
color: $dark-blue;
}
h2 {
color: $dark-blue;
}
h3 {
color: $dark-blue;
}
p {
color: $dark-blue;
}
a {
color: $dark-blue;
}
}
color: color(white);
}
src/index.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import * as React from "react";
import {render} from "react-dom";
import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import {AppContainer} from "react-hot-loader";
import { AppContainer } from "react-hot-loader";
import Routes from "./routes";
import "./index.scss";
src/pages/AdminCommonPage/AdminCommonPage.scss
+8 -7
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.admin-container {
display: flex;
flex-flow: row nowrap;
@@ -33,9 +34,9 @@
input[type="submit"] {
border: none;
outline: none;
background-color: $orange2;
background-color: color(orange2);
padding: 0.5rem 1rem;
color: $white;
color: color(white);
}
h1 {
@@ -44,17 +45,17 @@
.error {
margin-bottom: 0.5rem;
border: 1px solid $orange2;
border: 1px solid color(orange2);
padding: 8px 16px;
color: $orange2;
color: color(orange2);
display: inline-block;
}
.success {
margin-bottom: 0.5rem;
border: 1px solid $green;
border: 1px solid color(green);
padding: 8px 16px;
color: $green;
color: color(green);
display: inline-block;
}
@@ -65,7 +66,7 @@
margin-bottom: 1rem;
&:hover {
color: $orange2;
color: color(orange2);
}
img {
src/pages/AdminEventPage/AdminEventPage.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.admin-event-page {
table {
border-collapse: collapse;
@@ -8,11 +9,11 @@
table,
th,
td {
border: 1px solid $white;
border: 1px solid color(white);
padding: 0.5rem;
a {
color: $orange1;
color: color(orange1);
text-decoration: underline;
}
}
src/pages/AdminFeedPage/AdminFeedPage.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.admin-feed-page {
table {
border-collapse: collapse;
@@ -8,11 +9,11 @@
table,
th,
td {
border: 1px solid $white;
border: 1px solid color(white);
padding: 0.5rem;
a {
color: $orange1;
color: color(orange1);
text-decoration: underline;
}
}
src/pages/AdminSignupPage/AdminSignupPage.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.admin-signup-page {
table {
border-collapse: collapse;
@@ -8,11 +9,11 @@
table,
th,
td {
border: 1px solid $white;
border: 1px solid color(white);
padding: 0.5rem;
a {
color: $orange1;
color: color(orange1);
text-decoration: underline;
}
}
src/pages/ContactsPage/ContactsPage.tsx
+13 -14
View File
@@ -1,11 +1,10 @@
import * as React from "react";
import Helmet from "react-helmet";
import "./ContactsPage.scss";
import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
import { StaticContext } from "../../server/StaticContext";
import PageLink from "../../components/PageLink/PageLink";
import Card from "../../components/Card";
import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
import PageSection from "../../components/PageSection";
import HeroMainSection from "../../components/HeroMainSection";
import ContactCard from "../../components/ContactCard";
@@ -68,21 +67,21 @@ class ContactsPage extends React.Component<ContactsPageProps, ContactsPageState>
</Helmet>
Contacts Page
<HeroMainSection>
<h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
<p>
lorem ipsum dolor est
<h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
<p>
lorem ipsum dolor est
</p>
</HeroMainSection>
<PageSection backgroundColor={PageSectionColor.White}>
{contacts.map(contact => (
<ContactCard
key = {contact.id}
first_name = {contact.first_name}
last_name = {contact.last_name}
phone = {contact.phone_number}
email = {contact.email}
<PageSection backgroundColor={ColorEnum.White}>
{contacts.map(contact => (
<ContactCard
key={contact.id}
first_name={contact.first_name}
last_name={contact.last_name}
phone={contact.phone_number}
email={contact.email}
/>
))}
))}
</PageSection>
</div>
);
src/pages/EventCreatePage/EventCreatePage.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.event-create-page {
width: 100%;
@@ -34,8 +35,8 @@
}
button {
background-color: $blue;
color: $white;
background-color: color(blue);
color: color(white);
padding: 0.5rem 1rem;
border: none;
outline: none;
src/pages/FeedCreatePage/FeedCreatePage.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.post-create-page {
width: 100%;
@@ -34,8 +35,8 @@
}
button {
background-color: $blue;
color: $white;
background-color: color(blue);
color: color(white);
padding: 0.5rem 1rem;
border: none;
outline: none;
src/pages/FrontPage/FrontPage.tsx
+9 -10
View File
@@ -9,8 +9,7 @@ import { StaticContext } from "../../server/StaticContext";
// @ts-ignore
import * as BeerImage from "../../assets/img/beer.jpeg";
import PageSection from "../../components/PageSection";
import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
import PageLink from "../../components/PageLink/PageLink";
import HeroMainSection from "../../components/HeroMainSection";
@@ -19,7 +18,7 @@ import Button, { ButtonType } from "../../components/Button";
import Ribbon from "../../components/Ribbon";
import SponsorReel from "../../components/SponsorReel";
import HeroAsideItem from "../../components/HeroAsideItem";
import TextAnchor from "../../components/TextAnchor/index";
import TextAnchor from "../../components/TextAnchor";
import { TextSize } from "../../components/TextAnchor/TextAnchor";
interface FrontPageProps {
@@ -95,7 +94,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
const { events, feed } = this.state;
return (
<div className="front-page">
<PageSection backgroundColor={PageSectionColor.DarkBlue} fullSize>
<PageSection backgroundColor={ColorEnum.DarkBlue} fullSize>
<HeroMainSection>
<h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
<p>
@@ -113,7 +112,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
</div>
</HeroMainSection>
<HeroAsideSection backgroundColor={HeroAsideColor.DarkBlue}>
<HeroAsideSection textColor={ColorEnum.LightBlue} backgroundColor={ColorEnum.DarkBlue}>
<HeroAsideItem
title="Vasta-aloittanut opiskelija"
linkHref="/kilta/fuksi"
@@ -138,7 +137,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
</HeroAsideItem>
</HeroAsideSection>
</PageSection>
<PageSection backgroundColor={PageSectionColor.White} cardSection>
<PageSection backgroundColor={ColorEnum.White} cardSection>
{events.map(event => (
<Card
key={event.id}
@@ -160,16 +159,16 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
</PageLink>
</div>
</PageSection>
<PageSection backgroundColor={PageSectionColor.Orange}>
<PageSection backgroundColor={ColorEnum.Orange1}>
<Ribbon>
<h3>Sössöä vuodesta 1969.</h3>
<TextAnchor size={TextSize.SmallRibbon} to="https://sosso.fi">
<TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://sosso.fi">
<h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4>
</TextAnchor>
</Ribbon>
</PageSection>
<PageSection
backgroundColor={PageSectionColor.White}
backgroundColor={ColorEnum.White}
bottomBorder
cardSection
>
@@ -196,7 +195,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
</PageLink>
</div>
</PageSection>
<PageSection center backgroundColor={PageSectionColor.White}>
<PageSection center backgroundColor={ColorEnum.White}>
<SponsorReel />
</PageSection>
</div>
src/pages/GuildPage/GuildPage.tsx
+37 -53
View File
@@ -10,10 +10,9 @@ import HeroAsideSection from "../../components/HeroAsideSection";
import HeroAsideItem from "../../components/HeroAsideItem";
import Ribbon from "../../components/Ribbon";
import InfoBox from "../../components/InfoBox";
import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
import Accordion from "../../components/Accordion";
import TextAnchor from "../../components/TextAnchor/index";
import TextAnchor from "../../components/TextAnchor";
import { TextSize } from "../../components/TextAnchor/TextAnchor";
export interface GuildPageProps { }
@@ -27,13 +26,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
<link rel="canonical" href="https://sik.ayy.fi/kilta" />
</Helmet>
<div className="front-page">
<PageSection backgroundColor={PageSectionColor.DarkBlue} fullSize>
<PageSection backgroundColor={ColorEnum.DarkBlue} fullSize>
<HeroMainSection>
<h1>Kilta koostuu sähkötekniikan ja elektroniikan (ELEC) tutkinto-ohjelmissa opiskelevista opiskelijoista</h1>
<p>Vapaa-ajan <TextAnchor to="/">jäsenpalvelujen</TextAnchor> lisäksi killan tehtävänä on edistää jäsentensä <TextAnchor to="/">opintoja</TextAnchor>, tarjota uraohjausta ja <TextAnchor to="/">fuksikasvatusta</TextAnchor>. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti <TextAnchor to="https://sosso.fi">Sössöä</TextAnchor>, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.</p>
<p>Vapaa-ajan <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">jäsenpalvelujen</TextAnchor> lisäksi killan tehtävänä on edistää jäsentensä <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">opintoja</TextAnchor>, tarjota uraohjausta ja <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="/">fuksikasvatusta</TextAnchor>. Jokaiselle jäsenelle löytyy varmasti jotakin—kaukomaita, opiskelijalehti <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.White} to="https://sosso.fi">Sössöä</TextAnchor>, ja kiltaaktiivina pääset kartuttamaan kokemusta, josta on hyötyä myös työelämässä.</p>
<p>Arvot estrumquias doluptatur aut quam fugiti cus debit landisciis eatemperes eumquibus di blat que sim etus idis dolut labor ad magnat.</p>
</HeroMainSection>
<HeroAsideSection backgroundColor={HeroAsideColor.LightTurquoise}>
<HeroAsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
<HeroAsideItem
title="Toverielämää ja sähkötekniikkaa"
linkHref="/kilta/tehtavat"
@@ -56,25 +55,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</HeroAsideItem>
</HeroAsideSection>
</PageSection>
<PageSection backgroundColor={PageSectionColor.White}>
<AsideSection className="page__white" />
<MainSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
<MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} >
<h3>Killan tehtävät ja tarina</h3>
<p>Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää
esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja
saunailtoja. Valinnanvaraa on, joten <TextAnchor to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella
saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi
tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.</p>
<p>Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja saunailtoja. Valinnanvaraa on, joten <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.</p>
<p>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor to="/opinnot">opetusta</TextAnchor>. Kilta on mukana
kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun
henkilöstöä lähemmäs kiltalaisia.
Kilta avaa oven <TextAnchor to="/yritysyhteistyo">yritysmaailmaan</TextAnchor> järjestämällä yritysten kanssa excursioita,
saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa
uusista avoimista työpaikoista.
Killalla on Otaniemen mukavin <TextAnchor to="/kiltahuone">kiltahuone</TextAnchor>, jossa voi käydä hengähtämässä
luentojen välillä, hakea apua vaikeisiin tehtäviin tai järjestää vaikka leffailtoja. Tämän
lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.</p>
<p>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/opinnot">opetusta</TextAnchor>. Kilta on mukana kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun henkilöstöä lähemmäs kiltalaisia. Kilta avaa oven <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/yritysyhteistyo">yritysmaailmaan</TextAnchor> järjestämällä yritysten kanssa excursioita, saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa uusista avoimista työpaikoista. Killalla on Otaniemen mukavin <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/kiltahuone">kiltahuone</TextAnchor>, jossa voi käydä hengähtämässä luentojen välillä, hakea apua vaikeisiin tehtäviin tai järjestää vaikka leffailtoja. Tämän lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.</p>
<h6>Takana lähes satavuotinen historia</h6>
@@ -98,11 +85,8 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
määritelmä kuuluukin: “teekkarius on kaikkea sitä, mitä teekkarit tekevät”. Yksi asia
meitä kaikkia kuitenkin yhdistää. Opiskelemme jotain tekniikkaan liittyvää täällä
Aalto-yliopistossa.
Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
yhdistyksistä</TextAnchor>. Teekkariutta on yhtä lailla SIK:n tapahtumien järjestäminen tai niihin
osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen
Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä
kiinnostavaa.</p>
Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
yhdistyksistä</TextAnchor>. Teekkariutta on yhtä lailla SIK:n tapahtumien järjestäminen tai niihin osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä kiinnostavaa.</p>
<p>Teekkareilla, varsinkin otaniemeläisillä, on pitkä ja vahva historia. Siihen kannattaa
tutustua, jotta saa jonkinlaisen kuvan siitä vahvasta teekkarihengestä, joka
@@ -110,7 +94,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
Teekkariuteen kuuluu olennaisena osana mukautuminen ajan vaatimuksiin. Jos asiat
tehtäisiin aina vanhaa toistaen, ei voitaisi enää edes puhua teekkariudesta.</p>
</MainSection>
<AsideSection className="page__white">
<AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} >
<div>
<PageLink to="/jasenedut/" desc="vuonna 2018&nbsp;›">
Yliopiston jäsenedut
@@ -126,27 +110,27 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</div>
</AsideSection>
</PageSection>
<PageSection backgroundColor={PageSectionColor.LightBlue}>
<PageSection backgroundColor={ColorEnum.LightBlue} textColor={ColorEnum.DarkBlue}>
<Ribbon>
<p>Killan hallinto koostuu XXX henkilöstä.</p>
</Ribbon>
</PageSection>
<PageSection backgroundColor={PageSectionColor.White}>
<AsideSection className="page__white" />
<MainSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} />
<MainSection backgroundColor={ColorEnum.White} textColor={ColorEnum.DarkBlue} >
<h2>Organisaatio</h2>
<p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor to="/valtuusto">valtuusto</TextAnchor>, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 1–2 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. <TextAnchor to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
<p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/valtuusto">valtuusto</TextAnchor>, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 1–2 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
<h6>Valtuuston toimintaa</h6>
<p>Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. <TextAnchor to="/dokumenttiarkisto">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>
<p>Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/dokumenttiarkisto">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>
<h6>Hallituksen toimintaa</h6>
<p>Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen <TextAnchor to="/toimikunnat">toimikuntansa</TextAnchor> kanssa. Puheenjohtajan tehtävä on pitää langat käsissään, ja olla perillä kaikesta, mitä killassa tapahtuu. Hallitus tekee päätökset ja sopii menettelytavat viikottaisessa kokouksessaan. Hallitus on vastuussa kaikesta killan näkyvästä ja näkymättömästä toiminnasta, ja se on myös oikea osoite, jos joku asia vaivaa mieltä, tai mielessä on <TextAnchor to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
<p>Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/toimikunnat">toimikuntansa</TextAnchor> kanssa. Puheenjohtajan tehtävä on pitää langat käsissään, ja olla perillä kaikesta, mitä killassa tapahtuu. Hallitus tekee päätökset ja sopii menettelytavat viikottaisessa kokouksessaan. Hallitus on vastuussa kaikesta killan näkyvästä ja näkymättömästä toiminnasta, ja se on myös oikea osoite, jos joku asia vaivaa mieltä, tai mielessä on <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
</MainSection>
<AsideSection className="page__white">
<AsideSection backgroundColor={ColorEnum.White}>
<div>
<PageLink to="/yhteystiedot/" desc="yhteystiedot&nbsp;›">
Vuoden 2019 hallinto
@@ -157,13 +141,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</div>
</AsideSection>
</PageSection>
<PageSection backgroundColor={PageSectionColor.DarkBlue}>
<PageSection backgroundColor={ColorEnum.DarkBlue}>
<Ribbon>
<p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor size={TextSize.Ribbon} to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor size={TextSize.Ribbon} to="/jaokset">jaokset</TextAnchor>.</p>
<p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.Ribbon} to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.Ribbon} to="/jaokset">jaokset</TextAnchor>.</p>
</Ribbon>
</PageSection>
<div style={{ display: "flex", }}>
<AsideSection className="page__light-turquoise">
<AsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
<h3>Miksi alkaa kilta-aktiiviksi?</h3>
<p>
Näitä töitä tehdessä saa väkisinkin paljon uusia kavereita ja oppii monia palkallisessa työelämässä tarpeellisia taitoja. Eikä laajasta tuttavapiiristä ja monista kontakteista varmasti haittaa ole tulevaa työuraakaan ajatellen. Rahallista tai materiaalista hyötyä kiltatoiminnasta ei saa, eikä kukaan killan toimintaan mukaan tuleva sitä pyrikään tavoittelemaan. Mikä tärkeintä, kiltatoiminta on kivaa!
@@ -178,16 +162,16 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
» Voit kokeilla ja oppia jotain sellaista, mitä et ikinä aikaisemmin ole tehnyt
</p>
</AsideSection>
<AsideSection className="page__light-blue">
<AsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightBlue}>
<h3>Runsaasti erilaisia tehtäviä</h3>
<p>
Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor to="/jaostot">Jaostoiminta</TextAnchor> mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.
Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to="/jaostot">Jaostoiminta</TextAnchor> mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.
</p>
<p>
» Haluatko <TextAnchor to={""} >valtuustoon</TextAnchor>, <TextAnchor to={""}>hallitukseen</TextAnchor> tai <TextAnchor to={""}>toimariksi</TextAnchor>?
» Haluatko <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""} >valtuustoon</TextAnchor>, <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>hallitukseen</TextAnchor> tai <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>toimariksi</TextAnchor>?
</p>
<p>
» <TextAnchor to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
» <TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.DarkBlue} to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
</p>
<p>
» Lorem ipsum
@@ -195,8 +179,8 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</AsideSection>
</div>
<PageSection backgroundColor={PageSectionColor.White}>
<AsideSection className="page__white">
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
<div>
<h2>Sähkötekniikan korkeakoulun toimikunnat</h2>
<p>
@@ -218,7 +202,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
<Accordion title="Ipsum" />
</div>
</AsideSection>
<AsideSection className="page__white">
<AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
<div>
<h2>Jaokset—kokeile kiltatoimintaa vapaammin</h2>
<p>
@@ -227,23 +211,23 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</div>
</AsideSection>
</PageSection>
<PageSection backgroundColor={PageSectionColor.Orange}>
<PageSection backgroundColor={ColorEnum.Orange1}>
<Ribbon>
<p>Jäsenedut vuonna 2019</p>
</Ribbon>
</PageSection>
<PageSection backgroundColor={PageSectionColor.White}>
<AsideSection className="page__white" />
<MainSection>
<PageSection backgroundColor={ColorEnum.White}>
<AsideSection backgroundColor={ColorEnum.White} />
<MainSection textColor={ColorEnum.Black}>
<h2>Aalto-yliopiston tarjoamat monenlaiset edut</h2>
<p>
Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet.
</p>
<p>
» <TextAnchor to={"https://download.aalto.fi"}>Download.aalto.fi</TextAnchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
» <TextAnchor textColor={ColorEnum.Blue} hoverColor={ColorEnum.DarkBlue} to={"https://download.aalto.fi"}>Download.aalto.fi</TextAnchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
</p>
</MainSection>
<AsideSection className="page__white">
<AsideSection textColor={ColorEnum.Black} backgroundColor={ColorEnum.White}>
<InfoBox>
<TextAnchor to={""}>Jäseneksi liittyminen</TextAnchor> on helppoa, hauskaa ja hyödyllistä 8 € jäsenmaksulla pääset nauttimaan kaikista jäseneduista.
</InfoBox>
src/pages/SignUpPage/SignUpPage.tsx
+3 -3
View File
@@ -3,7 +3,7 @@ import Helmet from "react-helmet";
import "./SignUpPage.scss";
import { getForm, SignupForm } from "../../models/SignupForm";
import PageSection from "../../components/PageSection";
import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
import { Question, optionTypes } from "../../components/SignupQuestionsWidget";
export interface SignUpPageProps {
@@ -50,7 +50,7 @@ class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
fetchSignUp = (): Promise<SignupForm> => {
const { match } = this.props;
const { id } = match.params;
const { id } = match.params;
const formPromise = getForm(id);
formPromise.then(signUpForm => {
this.setState({
@@ -117,7 +117,7 @@ class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
<Helmet>
<link rel="canonical" href={`https://sik.ayy.fi/signup/${id}`} />
</Helmet>
<PageSection backgroundColor={PageSectionColor.DarkBlue}>
<PageSection backgroundColor={ColorEnum.DarkBlue}>
{content}
</PageSection>
</div>
src/pages/SignupCreatePage/SignupCreatePage.scss
+3 -2
View File
@@ -1,5 +1,6 @@
@import "../../assets/scss/globals";
.signup-create-page {
width: 100%;
@@ -34,8 +35,8 @@
}
button {
background-color: $blue;
color: $white;
background-color: color(blue);
color: color(white);
padding: 0.5rem 1rem;
border: none;
outline: none;
src/routes.tsx
+9 -9
View File
@@ -20,11 +20,11 @@ import ContactsPage from "./pages/ContactsPage";
import AdminSignupPage from "./pages/AdminSignupPage";
import SignupCreatePage from "./pages/SignupCreatePage";
import SignUpPage from "./pages/SignUpPage";
import ActualPage from "./pages/ActualPage/index";
import FreshmenPage from "./pages/FreshmenPage/FreshmenPage";
import StudiesPage from "./pages/StudiesPage/index";
import CorporatePage from "./pages/CorporatePage/CorporatePage";
import InEnglishPage from "./pages/InEnglishPage/index";
import ActualPage from "./pages/ActualPage";
import FreshmenPage from "./pages/FreshmenPage";
import StudiesPage from "./pages/StudiesPage";
import CorporatePage from "./pages/CorporatePage";
import InEnglishPage from "./pages/InEnglishPage";
const renderPage = (Page) => (props): JSX.Element => {
return <CommonPage page={Page} {...props} />;
@@ -60,11 +60,11 @@ const adminRoutes = [
{ path: "/admin/feed/create", page: FeedCreatePage },
{ path: "/admin/feed/:id", page: FeedCreatePage },
{ path: "/admin/events", page: AdminEventPage },
{ path: "/admin/events/create", page: EventCreatePage},
{ path: "/admin/events/:id", page: EventCreatePage},
{ path: "/admin/events/create", page: EventCreatePage },
{ path: "/admin/events/:id", page: EventCreatePage },
{ path: "/admin/signups", page: AdminSignupPage },
{ path: "/admin/signups/create", page: SignupCreatePage},
{ path: "/admin/signups/:id", page: SignupCreatePage},
{ path: "/admin/signups/create", page: SignupCreatePage },
{ path: "/admin/signups/:id", page: SignupCreatePage },
{ path: "/admin/logout", page: AdminLogoutPage },
{ path: "/admin", page: AdminFrontPage },
];