Browse files

Convert class diagram images for Suggestotron into HTML/CSS

  • Loading branch information...
1 parent f1e53b6 commit 2edc0ea431819bc33cfb593de2abd2a35d4442c9 @tjgrathwell tjgrathwell committed Mar 23, 2013
View
2 lib/doc_page.rb
@@ -128,7 +128,7 @@ def body_content
end
}
- div(:class=>:bottom) {
+ div(class: 'bottom cf') {
p "Railsbridge Docs"
p do
text "Source: "
View
19 lib/step.rb
@@ -282,6 +282,25 @@ def md2html text
MarkdownRenderer.render(text)
end
+ def model_diagram options
+ header = options.delete(:header)
+ fields = options.delete(:fields)
+ table(options.merge(class: 'model-diagram')) do
+ thead do
+ tr do
+ th header
+ end
+ end
+ tbody do
+ fields.each do |field|
+ tr do
+ td field
+ end
+ end
+ end
+ end
+ end
+
private
def _render_inner_content
View
48 public/css/doc_page.css
@@ -192,24 +192,54 @@ img {
display: block; /* otherwise centering doesn't happen */
}
-/* Clearfix for bottom of page */
-.bottom {
- clear: both;
- *zoom: 1;
+.model-diagram {
+ margin: 0 auto;
+ border: 1px solid black;
+ border-collapse: collapse;
+}
+
+.model-diagram th {
+ background-color: lightblue;
+}
+
+.model-diagram td {
+ padding: 0 5px;
+ border: 1px solid black;
+}
+
+.horiz-line {
+ position: absolute;
+ height: 1px;
+ border-bottom: 1px solid blue;
}
-.bottom:before,
-.bottom:after {
+.vert-line {
+ position: absolute;
+ width: 1px;
+ border-left: 1px solid blue;
+}
+
+.arrow-left {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-top: 8px solid transparent;
+ border-bottom: 8px solid transparent;
+
+ border-right:8px solid blue;
+}
+
+/* Clearfix */
+.cf:before,
+.cf:after {
display: table;
line-height: 0;
}
-.bottom:after {
+.cf:after {
clear: both;
}
-
-
@media print {
.toc, .top_links {
display: none;
View
2 sites/curriculum/creating_a_migration.step
@@ -1,6 +1,6 @@
goals {
- img alt: "Topics Table", src: "img/topics_table.png"
+ model_diagram header: 'Topics', fields: %w(id title description)
message "The suggestotron has a list of topics that people can vote on. We'll store our topics in the database. In this step you'll do the following:"
View
11 sites/curriculum/hooking_up_votes_and_topics.step
@@ -1,6 +1,15 @@
goals {
- img alt: "topics_and_votes_table", src: "img/topics_and_votes_table.png"
+ div(style: 'margin: 0 auto; width: 250px; height: 120px;') do
+ model_diagram header: 'Topics', fields: %w(id title description), style: "float: left;"
+ div(style: 'float: left; position: relative; width: 60px; height: 100px;') do
+ div(class: 'arrow-left', style: 'left: 0; top: 30px;')
+ div(class: 'horiz-line', style: 'left: 5px; top: 37px; width: 25px;')
+ div(class: 'vert-line', style: 'left: 30px; top: 38px; height: 25px;')
+ div(class: 'horiz-line', style: 'right: 0; top: 62px; width: 30px;')
+ end
+ model_diagram header: 'Votes', fields: %w(id topic_id), style: "float: left;"
+ end
goal "Because there is an explicit relationship between a topic and its
votes, we need to specify that. In this step, we'll explicitly
View
BIN sites/curriculum/img/table_topics.png
Deleted file not rendered
View
BIN sites/curriculum/img/topics_and_votes_table.png
Deleted file not rendered
View
BIN sites/curriculum/img/topics_table.png
Deleted file not rendered
View
BIN sites/curriculum/img/votes_table.png
Deleted file not rendered
View
2 sites/curriculum/voting_on_topics.step
@@ -2,7 +2,7 @@
goals {
goal "Create a model for votes"
- img alt: "Topics Table", src: "img/votes_table.png"
+ model_diagram header: 'Votes', fields: %w(id topic_id)
message "Every topic in suggestotron can be voted on. In order to count votes, we need to record votes. We'll add that table now."
}

0 comments on commit 2edc0ea

Please sign in to comment.