fix poker style issuw

cdphp · Sep 6, 2017 · 75fb4c0 · 75fb4c0
1 parent c873c58
commit 75fb4c0
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 22 deletions.
diff --git a/poker/app/assets/javascripts/components/poker_room.js.jsx b/poker/app/assets/javascripts/components/poker_room.js.jsx
@@ -6,7 +6,7 @@ class PokerRoom extends React.Component {
 
   render() {
     return(
-      <div>
+      <div className="col-lg-12 row">
         <PokerTable statistics_data={this.state.statistics_data} owner={this.props.owner} attendees={this.state.attendees} room_status={this.state.room_status} onPlayCard={this.handlePlayCard.bind(this)} onToggleStatus={this.handleToggleStatus.bind(this)} />
         <AttendeeList room_status={this.state.room_status} attendees={this.state.attendees} current_user_id={this.props.current_user} current_user_name={this.props.current_user_name} />
         <SubjectPopup current_topic={this.state.current_topic} onSubjectUpdate={this.handleSubjectUpdate.bind(this)} />

diff --git a/poker/app/assets/javascripts/components/room/attendee_list.js.jsx b/poker/app/assets/javascripts/components/room/attendee_list.js.jsx
@@ -9,7 +9,7 @@ class AttendeeList extends React.Component {
       return this.renderAttendee(attendee);
     });
     return(
-      <div className="col-sm-3 col-sm-offset-1 attendee-list">
+      <div className="col-sm-3 offset-sm-1 attendee-list">
         <h4>AttendeeList</h4>
         <ol className="attendees-list" >
           { attendees }
@@ -43,7 +43,7 @@ class AttendeeList extends React.Component {
   card_number(attendee) {
     if(this.props.room_status == 'finish'){
       return(
-        <span className="badge card">
+        <span className="badge card-number">
           { attendee.number }
         </span>
         )

diff --git a/poker/app/assets/javascripts/components/room/poker_emitter.js.jsx b/poker/app/assets/javascripts/components/room/poker_emitter.js.jsx
@@ -8,22 +8,19 @@ class PokerEmitter extends React.Component {
     let owner_button = this.renderOwnerButton();
     let input_disable = this.is_disabled();
     return(
-      <div className="col-sm-8 poker-emitter form-inline">
-        <div className="row">
-          <form ref='play_card' onSubmit={this._onSubmit.bind(this)}>
-            <div className="input-group col-md-8">
-              <span className="input-group-addon">
-                <i className="glyphicon glyphicon-piggy-bank"></i>
-              </span>
-              <input type="number" name="card_number" disabled={input_disable} className="form-control input-lg" placeholder="Enter Your Number..." onChange={this._onChange.bind(this)} value={this.state.card_number} />
-              <span className="input-group-btn">
-                <button className="btn btn-default btn-lg" type="submit">Send</button>
-              </span>
+      <form ref='play_card' onSubmit={this._onSubmit.bind(this)}>
+        <div className="row col-sm-8 poker-emitter form-inline from-control">
+          <div className="col-md-4">
+            <div className="input-group-lg">
+              <input type="number" name="card_number" disabled={input_disable} className="form-control" placeholder="Enter Your Number..." onChange={this._onChange.bind(this)} value={this.state.card_number} />
             </div>
+          </div>
+          <div className="col-md-2">
+            <button className="btn btn-secondary btn-lg" type="submit">Send</button>
+          </div>
           { owner_button }
-          </form>
         </div>
-      </div>
+      </form>
     )
   }
 
@@ -32,7 +29,7 @@ class PokerEmitter extends React.Component {
     let class_name = "btn btn-info btn-lg "+this.props.room_status;
     if(this.props.owner){
       return(
-        <div className="input-group col-md-2 col-md-offset-1">
+        <div className="col-sm-2 offest-sm-3">
           <button className={class_name} type="button" onClick={this.handelStart.bind(this)} >{ button_text }</button>
         </div>
       )

diff --git a/poker/app/assets/javascripts/components/room/poker_table.js.jsx b/poker/app/assets/javascripts/components/room/poker_table.js.jsx
@@ -6,7 +6,7 @@ class PokerTable extends React.Component {
 
   render() {
     return(
-      <div className='col-sm-8 poker-table' >
+      <div className='col-sm-8 poker-table card'>
         <PokerDesktop attendees={this.props.attendees} room_status={this.props.room_status} statistics_data={this.props.statistics_data} />
         <PokerEmitter owner={this.props.owner} room_status={this.props.room_status} onPlayCard={this.props.onPlayCard} onToggleStatus={this.props.onToggleStatus} />
       </div>

diff --git a/poker/app/assets/stylesheets/main.scss b/poker/app/assets/stylesheets/main.scss
@@ -1,2 +1 @@
-
 @import "styles/room.scss";
diff --git a/poker/app/assets/stylesheets/poker-room.scss b/poker/app/assets/stylesheets/poker-room.scss
@@ -0,0 +1,12 @@
+@import "styles/room.scss";
+
+body {
+    // font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: "Hiragino Sans GB","华文细黑","STHeiti","微软雅黑","Microsoft YaHei",SimHei,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    // font-size: 1rem;
+    // line-height: 1.43;
+    // color: #484848;
+    background-color: #fff;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale
+}
diff --git a/poker/app/assets/stylesheets/styles/room.scss b/poker/app/assets/stylesheets/styles/room.scss
@@ -191,10 +191,14 @@ div.chat-box {
           width: 100%;
         }
       }
-      .card {
+      .card-number {
         top: 0px;
         left: 0px;
         position: absolute;
+        width: 90%;
+        line-height: 2em;
+        font-size: 1.5em;
+        background-color: rgba(0, 0, 0, 0.3);
       }
       span {
       }
@@ -233,6 +237,7 @@ div.chat-box {
 .poker-emitter {
   position: fixed;
   bottom: 23.33333px;
+  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
   i {
     font-size: 2em;
   }

diff --git a/poker/app/controllers/application_controller.rb b/poker/app/controllers/application_controller.rb
@@ -1,5 +1,5 @@
 class ApplicationController < ActionController::Base
-  protect_from_forgery with: :exception
+  protect_from_forgery prepend: true
 
   helper_method :current_user, :current_room, :current_user_session
   around_action :set_current_user

diff --git a/poker/app/controllers/usersessions_controller.rb b/poker/app/controllers/usersessions_controller.rb
@@ -1,4 +1,7 @@
 class UsersessionsController < ApplicationController
+  skip_before_filter :verify_authenticity_token
+
+
   before_action :initial_result
 
   def new

diff --git a/poker/app/views/rooms/show.html.slim b/poker/app/views/rooms/show.html.slim
@@ -1,11 +1,12 @@
 - props = { subject: current_room.subject, current_room: current_room.id, current_user: session[:current_user_id], current_user_name: current_user.display_name, owner: current_room.owner_id == current_user.id, room_status: current_room.status_name, statistics_data: {statistics: current_room.statistics_data} }
 = stylesheet_link_tag "main"
+= stylesheet_link_tag "poker-room"
 .container
   .poker-header
     h1.room-subject
       span
         = current_room.subject
       - if current_user.id == current_room.owner_id
-        button.right.btn edit
+        button.right.btn.btn-info.btn-sm edit
   = react_component 'PokerRoom', props, {class: 'row'}
   .poker-footer