[www] PersonCard update

src/components/PersonCard.js

@@ -0,0 +1,41 @@
+const React = require('react')
+const Image = require('./Image')
+
+const Link = ({href, children}) => (
+	<a className="invisible" href={href}>
+		{children}
+	</a>
+)
+
+const Info = ({children}) => (
+	<div className="Article Article--cloud">
+		<div className="Article-Body">
+			{children}
+		</div>
+	</div>
+)
+
+module.exports = ({picture, name, url, profile}) => (
+	<div className="PersonCard">
+		<Link href={url}>
+			<div className="PersonCard-Picture">
+				<Image data={picture}/>
+			</div>
+
+			<div className="PersonCard-Title">
+				{name[0]} {name[1]} {name[2]}
+			</div>
+
+			<div className="PersonCard-Body">
+				{profile.position}
+
+				{/*<Info>*/}
+				{/*<p className="PersonCard-Position"><i><strong>{profile.position}</strong></i></p>*/}
+				{/*<p>{profile.status}</p>*/}
+				{/*<p>Образование: {profile.edu}</p>*/}
+				{/*<p>Диплом: <i>{profile.diploma}</i></p>*/}
+				{/*</Info>*/}
+			</div>
+		</Link>
+	</div>
+)

src/components/TeacherCard.js

@@ -1,37 +0,0 @@
-const React = require('react')
-const Image = require('./Image')
-
-const Head = ({url, children}) => (
-	<h2>
-		<a href={url}>{children}</a>
-	</h2>
-)
-
-const Info = ({children}) => (
-	<div className="Article Article--cloud">
-		<div className="Article-Body">
-			{children}
-		</div>
-	</div>
-)
-
-module.exports = ({picture, name, url, profile}) => (
-	<div className="TeacherCard">
-		<div className="TeacherCard-Picture">
-			<Image data={picture}/>
-		</div>
-
-		<div className="TeacherCard-Info">
-			<Head url={url}>
-				<span>{name[0]} {name[1]}</span> <strong>{name[2]}</strong>
-			</Head>
-
-			<Info>
-				<p className="TeacherCard-Position"><i><strong>{profile.position}</strong></i></p>
-				<p>{profile.status}</p>
-				<p>Образование: {profile.edu}</p>
-				<p>Диплом: <i>{profile.diploma}</i></p>
-			</Info>
-		</div>
-	</div>
-)

src/style/components/PersonCard.scss

@@ -0,0 +1,71 @@
+.PersonCard {
+  display: flex;
+  flex-direction: column;
+
+  margin: var(--single-margin) 0;
+
+  width: 30%;
+  min-width: 15em;
+  max-width: 30em;
+
+  //border: 1px solid #ccc;
+  //border-radius: 3px;
+
+  & > a {
+    display: block;
+    position: relative;
+    height: 100%;
+  }
+}
+
+.PersonCard-Picture {
+  border-radius: 3px;
+
+  width: 100%;
+  height: 24em;
+
+  img {
+    width: 100%;
+    height: 24em;
+
+    object-fit: cover;
+  }
+}
+
+.PersonCard-Title, .PersonCard-Body  {
+  position: absolute;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  color: white;
+  text-align: center;
+  text-shadow: 0 0 3px #000;
+  border-radius: 3px;
+}
+
+.PersonCard-Title {
+  top: 0;
+}
+
+.PersonCard-Body {
+  bottom: 0;
+}
+
+//Animation
+
+.PersonCard-Picture {
+  overflow: hidden;
+
+  img {
+    transition: transform 150ms ease-out;
+  }
+}
+
+.PersonCard {
+  &:hover {
+    img {
+      transform: scale(1.05);
+    }
+  }
+}
+

src/style/components/PersonCardList.scss

@@ -0,0 +1,7 @@
+.PersonCardList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  justify-content: space-between;
+}

src/style/components/TeacherCard.scss

@@ -1,49 +0,0 @@
-@import "../variables";
-
-$picture-width: 30%;
-$info-width: 100% - $picture-width;
-
-.TeacherCard {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  &-Picture {
-    margin-bottom: var(--double-margin);
-    width: $picture-width;
-    max-width: 15em;
-    min-width: 12em;
-
-    img {
-      width: 100%;
-    }
-  }
-
-  &-Info {
-    width: $info-width;
-
-    padding-left: var(--double-margin);
-    margin-bottom: var(--double-margin);
-    box-sizing: border-box;
-  }
-
-  &-Position {
-    font-size: $bigger-font-size;
-  }
-}
-
-@media (max-width: $mobile-width) {
-  .TeacherCard {
-    margin: 0 auto var(--double-margin);
-
-    &-Picture {
-      width: 100%;
-      max-width: $mobile-width;
-    }
-
-    &-Info {
-      width: 100%;
-      padding-left: 0;
-    }
-  }
-}

src/style/style.scss

@@ -23,7 +23,8 @@
 @import "components/ArticleCard";
 @import "components/ArticleCardList";
 @import "components/CollectiveImage";
-@import "components/TeacherCard";
+@import "components/PersonCard";
+@import "components/PersonCardList";
 
 @import "main";
 @import "body-wrapper";