Skip to content

GitLab

S
scratch-www
Commit e9cb08d2 authored by morant's avatar morant
Browse files
Options

Revert "Fix review comments, and organize code a bit." 

This reverts commit 3d9d280b.
parent 3d9d280b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 622 additions and 316 deletions
src/components/microworld/microworld.jsx
View file @ e9cb08d2
This diff is collapsed.
src/components/microworld/microworld.scss
View file @ e9cb08d2
......@@ -4,8 +4,8 @@
$base-bg: $ui-white;
#view {
background-color: $base-bg;
padding: 0;
background-color: $base-bg;
// To be integrated into the Global Typography standards
h3,
......@@ -26,9 +26,7 @@ $base-bg: $ui-white;
color: $type-gray;
}
.top-banner,
.videos-section,
.section {
.top-banner, .videos-section, .section {
padding: 30px 0;
width: 100%;
......@@ -57,7 +55,7 @@ $base-bg: $ui-white;
}
.video {
position: relative;
position:relative;
margin: 10px;
border-radius: 7px;
background-color: $active-gray;
......@@ -66,10 +64,10 @@ $base-bg: $ui-white;
}
img {
margin: 10px 10px 5px;
border-radius: 5px;
width: calc(100% - 20px);
height: 179px;
margin: 10px 10px 5px 10px;
border-radius: 5px;
}
.play-button {
......@@ -110,19 +108,18 @@ $base-bg: $ui-white;
.content {
img {
display: block;
margin-right: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
.box,
iframe {
display: block;
margin-right: auto;
.box, iframe {
margin-left: auto;
border: 0;
padding-top: 25px;
margin-right: auto;
padding-bottom: 15px;
padding-top: 25px;
border: 0px;
display: block;
}
iframe {
......@@ -135,48 +132,258 @@ $base-bg: $ui-white;
}
.side-by-side {
margin-right: auto;
margin-left: auto;
margin-right: auto;
width: 900px;
height: 520px;
height:520px;
.box {
width: 400px;
}
.design-studio-projects,
.design-studio {
display: inline-block;
.design-studio-projects,.design-studio {
width: 400px;
height: 500px;
display: inline-block;
}
.design-studio-projects {
float: right;
float:right;
}
.design-studio {
float: left;
iframe {
margin-top: 60px;
width: 960px;
-webkit-transform: scale(.5);
-webkit-transform: scale(0.5);
-webkit-transform-origin: top left;
-moz-transform: scale(.5);
-moz-transform: scale(0.5);
}
}
}
}
.box-content {
.nestedcarousel {
.box-content .tipsslider {
text-align: center;
.thumbnail {
display: inline-block;
margin: 0 50px;
margin: 0px 50px;
}
}
.pathways .box-content {padding:20px;}
.pathways .rightcol {float:right;width:30%;clear:none;margin-bottom:20px}
.pathways .rightcol .box-content{background-color:#FBFBFB}
.pathways .rightcol .box{margin-bottom:-10px;position:relative}
.pathways .thumb-with-subtext img {width:158px;height:128px;border:1px solid #ccc}
.pathways .thumb-with-subtext p {width:158px;height:auto}
.pathways .thumb-with-subtext{white-space:normal;display:inline-block;width:30%;margin:0 9px;vertical-align:top}
.pathways .thumb-with-title-and-sublinks{white-space:normal;display:inline-block;width:auto;margin:0 20px 20px 20px;vertical-align:top;text-align:left;}
.pathways .thumb-with-title-and-sublinks .span{}
.pathways .thumb-with-title-and-sublinks a {display:block}
.pathways .intro{ overflow:auto;margin-bottom:20px; }
.pathways h1{ text-align:center;}
.pathways .tutorial-pane {height: 300px}
.pathways .leftcol, .pathways .rightcol { //margin-right: 20px;float:left;}
.pathways .leftcol {
width: 50%;
}
.pathways .rightcol {
text-align: center;
margin-left: 8%;
}
.pathways .intro .rightcol {
margin: 0;
text-align: right;
}
.pathways .intro .leftcol {
margin: 20px;
float: left;
position: relative;
}
.pathways .intro .introinfo {
font-size: 17px;
position: absolute;
top: 0;
}
.pathways .intro .introinfo ul {
list-style-type: none;
margin: 0;
}
.pathways .intro h1 {
text-align: left;
}
.pathways .intro p {
font-size: 18px;
padding-right: 25px;
text-align: left;
}
.pathways .microworld {
padding: 5px;
}
.pathways .editor-and-tips {
padding: 15px 15px 0px 15px;
border-radius: 15px 15px 0 0;
box-shadow: 0px 0px 8px #cccccc inset, 0 2px 3px rgba(34, 25, 25, 0.3);
border-top: 1px solid #E0E0E0;
border-right: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
background-color: white;
margin-bottom: 50px;
/* offset-x | offset-y | blur-radius | color */
}
//for tips slideshow
.pathways .tips-slider.flexslider {
}
.pathways .flexslider .flex-prev {
top: 130px;
margin-left: 50px;
}
.pathways .flexslider .flex-next {
margin-right: 50px;
top: 130px;
}
.pathways .tips {
background-color: #E6E6E8;
width: 887px;
margin-left: 10px;
padding-bottom: 1px;
margin-bottom: 15px;
border: 1px solid #D0D1D2;
}
.pathways .tips h3 {
text-align: center;
font-size: 1.4em;
padding: 5px;
}
.pathways .tip-slide {
width: 80%;
margin: 0 auto;
text-align: center;
//background: lightgray;
}
.pathways .tip-step {
display: inline-block;
margin: 0 10px;
min-width: 180px;
padding: 10px;
text-align: center;
vertical-align: middle;
height: 140px;
background-color: white;
border-radius: 10px;
position: relative;
}
.pathways .tip-step h5 {
color: #5C5D5F;
font-size: 1.1em;
font-weight: 400;
position: absolute;
border-radius: 0 0 10px 10px;
width: 100%;
bottom: 0;
margin: 0;
left: 0;
}
.pathways .tip-step img {
margin-left: auto;
margin-right: auto;
position: relative;
top: 45%;
transform: translateY(-50%);
overflow: hidden;
height: 50;
}
.pathways .tips-download {
background-color: #E6E6E8;
padding: 8px;
font-size: 1.1em;
margin: 0 -16px;
text-align: center;
font-family: "helvetica neue", arial, sans-serif;
}
.pathways .tips-download a:hover:after {
text-decoration: none;
}
.pathways .button {
padding-left: .5em;
padding-right: .5em;
}
.get-started .button {
text-size: 12px;
border-color: #ED8629;
background-color: #E58220;
background-image: -webkit-linear-gradient(top, #FF9522, #E58220);
background-image: -moz-linear-gradient(top, #FF9522, #E58220);
background-image: -ms-linear-gradient(top, #FF9522, #E58220);
background-image: -o-linear-gradient(top, #FF9522, #E58220);
background-image: linear-gradient(top, #FF9522, #E58220);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FF9522, endColorStr=#E58220);
}
//.pathways .box {background-color:#fff;}
.pathways .box-content {
margin: 5px 0;
border-top: none;
}
.pathways .tutorial-pane .box-content {
background-color: #f7f7f7;
padding: 20px 30px;
display: inline-block;
}
.pathways .slider-carousel {
padding: 10px 43px;
}
.gallery.thumb {
position: relative;
}
.pathways .gallery.thumb.item {
display: inline-block;
width: 33%;
font-size: 14px;
}
.pathways .gallery.thumb a.image {
display: block;
}
.pathways .gallery.thumb span.image img {
background-color: #fff;
width: 170px;
height: 100px;
margin: 5px;
}
.pathways .gallery.thumb .stats {
vertical-align: top;
opacity: .9;
border-radius: 5px;
background-color: #333;
color: white !important;
position: absolute;
bottom: 30px;
right: 120px;
padding: 1px;
}
}
}
src/components/nestedcarousel/nestedcarousel.json deleted 100644 → 0
View file @ 3d9d280b
[
{
"title":"Start Dancing",
"thumbnails":[
{
"type":"tip",
"title":"First, select a sprite",
"thumbnailUrl":"/images/microworlds/hiphop/dancer-sprite.png"
},
{
"type":"tip",
"title":"Then, try this script",
"thumbnailUrl":"/images/microworlds/hiphop/switch-wait.gif"
},
{
"type":"tip",
"title":"Start it!",
"thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
}
]
},
{
"title":"Repeat the Dance",
"thumbnails":[
{
"type":"tip",
"title":"Add another \"wait\"",
"thumbnailUrl":"/images/microworlds/hiphop/add-wait.gif"
},
{
"type":"tip",
"title":"Drag this block over",
"thumbnailUrl":"/images/microworlds/hiphop/add-repeat.gif"
},
{
"type":"tip",
"title":"Start it",
"thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
}
]
}
]
\ No newline at end of file
src/components/nestedcarousel/nestedcarousel.scss deleted 100644 → 0
View file @ 3d9d280b
@import "../../colors";
@import "../carousel/carousel.scss";
.nestedcarousel {
.slick-slide {
padding-left: 60px;
}
}
src/components/thumbnail/thumbnail.jsx
View file @ e9cb08d2
......@@ -15,8 +15,7 @@ var Thumbnail = React.createClass({
src: '',
type: 'project',
showLoves: false,
showRemixes: false,
linkTitle: true
showRemixes: false
};
},
render: function () {
......@@ -55,20 +54,13 @@ var Thumbnail = React.createClass({
</div>
);
}
var titleElement;
if (this.props.linkTitle) {
titleElement = <a href={this.props.href}>{this.props.title}</a>;
} else {
titleElement = this.props.title;
}
return (
<div className={classes} >
<a className="thumbnail-image" href={this.props.href}>
<img src={this.props.src} />
</a>
<div className="thumbnail-title">
{titleElement}
<a href={this.props.href}>{this.props.title}</a>
</div>
{extra}
</div>
......
src/components/tipsslider/tipsslider.json 0 → 100644
View file @ e9cb08d2
[
{
"id": 1,
"type": "project",
"title": "Project1",
"thumbnailUrl": "/images/microworlds/hiphop/add-repeat.gif",
"creator": "",
"href": "/images/microworlds/hiphop/add-repeat.gif"
},
{
"id": 2,
"type": "project",
"title": "Project2",
"thumbnailUrl": "/images/microworlds/hiphop/add-wait.gif",
"creator": "",
"href": "/images/microworlds/hiphop/add-wait.gif"
},
{
"id": 3,
"type": "project",
"title": "Project",
"thumbnailUrl": "",
"creator": "",
"href": "#"
},
{
"id": 4,
"type": "project",
"title": "Project",
"thumbnailUrl": "",
"creator": "",
"href": "#"
},
{
"id": 5,
"type": "project",
"title": "Project",
"thumbnailUrl": "",
"creator": "",
"href": "#"
},
{
"id": 6,
"type": "project",
"title": "Project",
"thumbnailUrl": "",
"creator": "",
"href": "#"
}
]
src/components/nestedcarousel/nestedcarousel.jsx → src/components/tipsslider/tipsslider.jsx
View file @ e9cb08d2
......@@ -7,24 +7,16 @@ var Thumbnail = require('../thumbnail/thumbnail.jsx');
require('slick-carousel/slick/slick.scss');
require('slick-carousel/slick/slick-theme.scss');
require('./nestedcarousel.scss');
require('./tipsslider.scss');
{/*
NestedCarousel is used to show a carousel, where each slide is composed of a few
thumbnails (for example, to show step-by-syep tips, where each stage has a few steps).
It creates the thumbnails without links.
Each slide has a title, and then a list of thumbnails, that will be shown together.
*/}
var NestedCarousel = React.createClass({
type: 'NestedCarousel',
var TipsSlider = React.createClass({
type: 'TipsSlider',
propTypes: {
items: React.PropTypes.array
},
getDefaultProps: function () {
return {
items: require('./nestedcarousel.json')
items: require('./tipsslider.json'),
};
},
render: function () {
......@@ -41,28 +33,25 @@ var NestedCarousel = React.createClass({
var arrows = this.props.items.length > settings.slidesToShow;
var classes = classNames(
'nestedcarousel',
'carousel',
'tipsslider',
this.props.className
);
var stages = [];
for (var i=0; i < this.props.items.length; i++) {
var items = this.props.items[i].thumbnails;
var items = this.props.items[i].tips;
var thumbnails = [];
for (var j=0; j < items.length; j++) {
var item = items[j];
thumbnails.push(
<Thumbnail key={'inner_' + i + '_' + j}
thumbnails.push(<Thumbnail key={item.id}
title={item.title}
src={item.thumbnailUrl}
linkTitle = {false} />);
src={item.thumbnailUrl} />)
}
stages.push(
<div key={'outer_' + i}>
<div className="testing" key={"stage_" + i}>
<h3>{this.props.items[i].title}</h3>
{thumbnails}
</div>);
</div>)
}
return (
<Slider className={classes} arrows={arrows} {... settings}>
......@@ -72,4 +61,4 @@ var NestedCarousel = React.createClass({
}
});
module.exports = NestedCarousel;
module.exports = TipsSlider;
src/components/tipsslider/tipsslider.scss 0 → 100644
View file @ e9cb08d2
@import "../../colors";
.tipsslider {
$icon-size: 40px;
$button-offset: $icon-size + 5px;
$box-content-offset: 20px;
//padding: 12px $button-offset;
.box-content & {
padding: 12px $button-offset - 20px;
}
.slick-next,
.slick-prev {
margin-top: -$icon-size/2;
width: $icon-size;
height: $icon-size;
&:before {
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: 70%;
width: $icon-size;
height: $icon-size;
font-size: $icon-size;
content: "";
}
&.slick-disabled:before {
opacity: 1;
}
}
.slick-prev {
left: 0;
&:before {
background-image: url("/svgs/carousel/prev_ui-dark-gray.svg");
}
&:hover:before {
background-image: url("/svgs/carousel/prev_ui-blue.svg");
background-size: 90%;
}
.box-content & {
left: -$box-content-offset;
}
}
.slick-next {
right: 0;
&:before {
background-image: url("/svgs/carousel/next_ui-dark-gray.svg");
}
&:hover:before {
background-image: url("/svgs/carousel/next_ui-blue.svg");
background-size: 90%;
}
.box-content & {
right: -$box-content-offset;
}
}
.slick-slide {
padding-right: 30px;
}
}
src/views/microworld_art/microworld_art.json
View file @ e9cb08d2
......@@ -27,18 +27,21 @@
"tips":[
{
"title":"Start Dancing",
"thumbnails":[
"tips":[
{
"id":1,
"type":"tip",
"title":"First, select a sprite",
"thumbnailUrl":"/images/microworlds/hiphop/dancer-sprite.png"
},
{
"id":2,
"type":"tip",
"title":"Then, try this script",
"thumbnailUrl":"/images/microworlds/hiphop/switch-wait.gif"
},
{
"id":3,
"type":"tip",
"title":"Start it!",
"thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
......@@ -47,18 +50,21 @@
},
{
"title":"Repeat the Dance",
"thumbnails":[
"tips":[
{
"id":4,
"type":"tip",
"title":"Add another \"wait\"",
"thumbnailUrl":"/images/microworlds/hiphop/add-wait.gif"
},
{
"id":5,
"type":"tip",
"title":"Drag this block over",
"thumbnailUrl":"/images/microworlds/hiphop/add-repeat.gif"
},
{
"id":6,
"type":"tip",
"title":"Start it",
"thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
......@@ -67,13 +73,15 @@
},
{
"title":"Play Music",
"thumbnails":[
"tips":[
{
"id":7,
"type":"tip",
"title":"Add music that repeats",
"thumbnailUrl":"/images/microworlds/hiphop/add-play-sound.gif"
},
{
"id":8,
"type":"tip",
"title":"Start it",
"thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
......@@ -82,18 +90,21 @@
},
{
"title":"Shadow Dance",
"thumbnails":[
"tips":[
{
"id":7,
"type":"tip",
"title":"Add this block",
"thumbnailUrl":"/images/microworlds/hiphop/shadow-dance.gif"
},
{
"id":8,
"type":"tip",
"title":"Start it",
"thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
},
{
"id":9,
"type":"tip",
"title":"Click the stop sign to reset",
"thumbnailUrl":"/images/microworlds/hiphop/stop.gif"
......@@ -102,18 +113,21 @@
},
{
"title":"More things to try",
"thumbnails":[
"tips":[
{
"id":10,
"type":"tip",
"title":"Try different dance moves",
"thumbnailUrl":"/images/microworlds/hiphop/change-dance-moves.gif"
},
{
"id":11,
"type":"tip",
"title":"Add more moves",
"thumbnailUrl":"/images/microworlds/hiphop/long-dance-script.png"
},
{
"id":12,
"type":"tip",
"title":"Change the timing",
"thumbnailUrl":"/images/microworlds/hiphop/change-dance-timing.png"
......
src/views/microworld_art/microworld_art.jsx
View file @ e9cb08d2
var render = require('../../lib/render.jsx');
var Microworld = require('../../components/microworld/microworld.jsx');
var microworldData = require('./microworld_art.json');
render(<Microworld microworldData={microworldData} />, document.getElementById('view'));
render(<Microworld microworldData={require("./microworld_art.json")} />, document.getElementById('view'));
src/views/microworld_fashion/microworld_fashion.json
View file @ e9cb08d2
......@@ -16,13 +16,15 @@
"tips":[
{
"title":"Click on blocks to see what they do",
"thumbnails":[
"tips":[
{
"id":0,
"type":"tip",
"title":" Try clicking this block ",
"thumbnailUrl":"/images/microworlds/fashion/click-block-color.gif"
},
{
"id":1,
"type":"tip",
"title":" Or this block",
"thumbnailUrl":"/images/microworlds/fashion/click-block-costume.gif"
......@@ -31,18 +33,21 @@
},
{
"title":"Try changing colors",
"thumbnails":[
"tips":[
{
"id":2,
"type":"tip",
"title":" First, select a clothing item ",
"thumbnailUrl":"/images/microworlds/fashion/shirts-sprite.png"
},
{
"id":3,
"type":"tip",
"title":" Then, try this script",
"thumbnailUrl":"/images/microworlds/fashion/when-clicked-color.gif"
},
{
"id":4,
"type":"tip",
"title":" Test it out!",
"thumbnailUrl":"/images/microworlds/fashion/click-shirt.gif"
......@@ -51,18 +56,21 @@
},
{
"title":"Try changing costumes",
"thumbnails":[
"tips":[
{
"id":5,
"type":"tip",
"title":"Select a piece of clothing ",
"thumbnailUrl":"/images/microworlds/fashion/hats-sprite.png"
},
{
"id":6,
"type":"tip",
"title":"Then, switch costumes",
"thumbnailUrl":"/images/microworlds/fashion/when-clicked-costume.gif"
},
{
"id":7,
"type":"tip",
"title":" Now, click it!",
"thumbnailUrl":"/images/microworlds/fashion/click-hat.gif"
......@@ -71,18 +79,21 @@
},
{
"title":"Say hello",
"thumbnails":[
"tips":[
{
"id":8,
"type":"tip",
"title":"Select the person",
"thumbnailUrl":"/images/microworlds/fashion/person-sprite.png"
},
{
"id":9,
"type":"tip",
"title":"Type in a phrase",
"thumbnailUrl":"/images/microworlds/fashion/say-something.gif"
},
{
"id":10,
"type":"tip",
"title":"Then, try this script",
"thumbnailUrl":"/images/microworlds/fashion/when-clicked-say.gif"
......@@ -91,13 +102,15 @@
},
{
"title":"Move the sprites",
"thumbnails":[
"tips":[
{
"id":11,
"type":"tip",
"title":"Select an accessory",
"thumbnailUrl":"/images/microworlds/fashion/accessories-sprite.png"
},
{
"id":12,
"type":"tip",
"title":"Tell it where to go",
"thumbnailUrl":"/images/microworlds/fashion/when-clicked-goto.gif"
......@@ -106,18 +119,21 @@
},
{
"title":"Other things to try",
"thumbnails":[
"tips":[
{
"id":13,
"type":"tip",
"title":"Add a sound ",
"thumbnailUrl":"/images/microworlds/fashion/play-drum.png"
},
{
"id":14,
"type":"tip",
"title":" Explore other costumes ",
"thumbnailUrl":"/images/microworlds/fashion/next-costume.png"
},
{
"id":15,
"type":"tip",
"title":"Make longer scripts ",
"thumbnailUrl":"/images/microworlds/fashion/block-stack.png"
......
src/views/microworld_fashion/microworld_fashion.jsx
View file @ e9cb08d2
var render = require('../../lib/render.jsx');
var Microworld = require('../../components/microworld/microworld.jsx');
var microworldData = require('./microworld_fashion.json');
render(<Microworld microworldData={microworldData} />, document.getElementById('view'));
render(<Microworld microworldData={require("./microworld_fashion.json")} />, document.getElementById('view'));
src/views/microworld_hiphop/microworld_hiphop.json
View file @ e9cb08d2
......@@ -16,18 +16,21 @@
"tips":[
{
"title":"Start Dancing",
"thumbnails":[
"tips":[
{
"id":1,
"type":"tip",
"title":"First, select a sprite",
"thumbnailUrl":"/images/microworlds/hiphop/dancer-sprite.png"
},
{
"id":2,
"type":"tip",
"title":"Then, try this script",
"thumbnailUrl":"/images/microworlds/hiphop/switch-wait.gif"
},
{
"id":3,
"type":"tip",
"title":"Start it!",
"thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
......@@ -36,18 +39,21 @@
},
{
"title":"Repeat the Dance",
"thumbnails":[
"tips":[
{
"id":4,
"type":"tip",
"title":"Add another \"wait\"",
"thumbnailUrl":"/images/microworlds/hiphop/add-wait.gif"
},
{
"id":5,
"type":"tip",
"title":"Drag this block over",
"thumbnailUrl":"/images/microworlds/hiphop/add-repeat.gif"
},
{
"id":6,
"type":"tip",
"title":"Start it",
"thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
......@@ -56,13 +62,15 @@
},
{
"title":"Play Music",
"thumbnails":[
"tips":[
{
"id":7,
"type":"tip",
"title":"Add music that repeats",
"thumbnailUrl":"/images/microworlds/hiphop/add-play-sound.gif"
},
{
"id":8,
"type":"tip",
"title":"Start it",
"thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
......@@ -71,18 +79,21 @@
},
{
"title":"Shadow Dance",
"thumbnails":[
"tips":[
{
"id":7,
"type":"tip",
"title":"Add this block",
"thumbnailUrl":"/images/microworlds/hiphop/shadow-dance.gif"
},
{
"id":8,
"type":"tip",
"title":"Start it",
"thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
},
{
"id":9,
"type":"tip",
"title":"Click the stop sign to reset",
"thumbnailUrl":"/images/microworlds/hiphop/stop.gif"
......@@ -91,18 +102,21 @@
},
{
"title":"More things to try",
"thumbnails":[
"tips":[
{
"id":10,
"type":"tip",
"title":"Try different dance moves",
"thumbnailUrl":"/images/microworlds/hiphop/change-dance-moves.gif"
},
{
"id":11,
"type":"tip",
"title":"Add more moves",
"thumbnailUrl":"/images/microworlds/hiphop/long-dance-script.png"
},
{
"id":12,
"type":"tip",
"title":"Change the timing",
"thumbnailUrl":"/images/microworlds/hiphop/change-dance-timing.png"
......
src/views/microworld_hiphop/microworld_hiphop.jsx
View file @ e9cb08d2
var render = require('../../lib/render.jsx');
var Microworld = require('../../components/microworld/microworld.jsx');
var microworldData = require('./microworld_hiphop.json');
render(<Microworld microworldData={microworldData} />, document.getElementById('view'));
render(<Microworld microworldData={require("./microworld_hiphop.json")} />, document.getElementById('view'));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment